I'm stuck and have no idea how to tackle this error anymore.

Here is code of my App ponent

const App = () => (
  <Root>
    <Layout>
      <Router history={history}>
        <Navbar />
        <Switch>
          {routingConfig.map((page: RouteElement, idx: number) => {
            const { exact, path, ponent } = page
            return <Route key={idx} exact={exact} path={path} ponent={ponent} />
          }
          )}
        </Switch>
      </Router>
    </Layout>
  </Root>
)

Errors I'm getting (same error happens in two ponents - Layout and Router):

> Type 'Element' is not assignable to type 'ReactChildren |
> (ReactChildren & string) | (ReactChildren & number) | (ReactChildren &
> false) | (ReactChildren & true) | (ReactChildren & ReactElement<...>)
> | (ReactChildren & ReactNodeArray) | (ReactChildren & ReactPortal)'.  
> Type 'Element' is not assignable to type 'ReactChildren &
> ReactPortal'.
>     Type 'Element' is missing the following properties from type 'ReactChildren': map, forEach, count, only, toArray  TS2322
> 
>     14 | const App = () => (
>     15 |   <Root>
>   > 16 |     <Layout>
>        |     ^
>     17 |       <Router history={history}>
>     18 |         <Navbar />
>     19 |         <Switch>


    15 |   <Root>
    16 |     <Layout>
  > 17 |       <Router history={history}>
       |       ^
    18 |         <Navbar />

Code of Layout ponent:

interface Props {
    children: React.ReactChildren
}

const Layout: React.FC<Props> = ({ children }) => <div className="layout">{children}</div>

When I added ts-ignore above Layout ponent different errors seems to bubble up to the Root ponent

Type '{ children: (string | Element)[]; }' is not assignable to type 'Props'.
  Types of property 'children' are inpatible.
    Type '(string | Element)[]' is missing the following properties from type 'ReactChildren': count, only, toArray  TS2322

    13 | 
    14 | const App = () => (
  > 15 |   <Root>
       |    ^
    16 |     //@ts-ignore
    17 |     <Layout>
    18 |       <Router history={history}>

Code of Root ponent:

interface Props {
    children: React.ReactChildren
}

export const Root: React.FC<Props> = ({ children }) => (
    <Provider store={store}>
        {children}
    </Provider>
)

No idea why Element type is being returned at some point there. Any hint would be appreciated.

I'm stuck and have no idea how to tackle this error anymore.

Here is code of my App ponent

const App = () => (
  <Root>
    <Layout>
      <Router history={history}>
        <Navbar />
        <Switch>
          {routingConfig.map((page: RouteElement, idx: number) => {
            const { exact, path, ponent } = page
            return <Route key={idx} exact={exact} path={path} ponent={ponent} />
          }
          )}
        </Switch>
      </Router>
    </Layout>
  </Root>
)

Errors I'm getting (same error happens in two ponents - Layout and Router):

> Type 'Element' is not assignable to type 'ReactChildren |
> (ReactChildren & string) | (ReactChildren & number) | (ReactChildren &
> false) | (ReactChildren & true) | (ReactChildren & ReactElement<...>)
> | (ReactChildren & ReactNodeArray) | (ReactChildren & ReactPortal)'.  
> Type 'Element' is not assignable to type 'ReactChildren &
> ReactPortal'.
>     Type 'Element' is missing the following properties from type 'ReactChildren': map, forEach, count, only, toArray  TS2322
> 
>     14 | const App = () => (
>     15 |   <Root>
>   > 16 |     <Layout>
>        |     ^
>     17 |       <Router history={history}>
>     18 |         <Navbar />
>     19 |         <Switch>


    15 |   <Root>
    16 |     <Layout>
  > 17 |       <Router history={history}>
       |       ^
    18 |         <Navbar />

Code of Layout ponent:

interface Props {
    children: React.ReactChildren
}

const Layout: React.FC<Props> = ({ children }) => <div className="layout">{children}</div>

When I added ts-ignore above Layout ponent different errors seems to bubble up to the Root ponent

Type '{ children: (string | Element)[]; }' is not assignable to type 'Props'.
  Types of property 'children' are inpatible.
    Type '(string | Element)[]' is missing the following properties from type 'ReactChildren': count, only, toArray  TS2322

    13 | 
    14 | const App = () => (
  > 15 |   <Root>
       |    ^
    16 |     //@ts-ignore
    17 |     <Layout>
    18 |       <Router history={history}>

Code of Root ponent:

interface Props {
    children: React.ReactChildren
}

export const Root: React.FC<Props> = ({ children }) => (
    <Provider store={store}>
        {children}
    </Provider>
)

No idea why Element type is being returned at some point there. Any hint would be appreciated.

• javascript
• reactjs
• typescript
• react-router

2 Answers 2

It looks like your Layout children props is supposed to be child or element since you have just only child:

interface Props {
  children: React.ReactChild
}

ReactChild is deprecated. Just use ReactNode

interface Props {
    children: React.ReactNode
}