TypeScript and React - children type

Question

I have a very simple functional component as follows   import   as React from  react    export interface AuxProps         children  React ReactNode      const aux    props  AuxProps    gt  props children   export default aux    And another component   import   as React from  react    export interface LayoutProps        children  React ReactNode    const layout    props  LayoutProps    gt         lt Aux gt           lt div gt Toolbar  SideDrawer  Backdrop lt  div gt           lt main gt               props children           lt  main gt       lt Aux  gt      export default layout    I keep on getting the following error       ts    JSX element type  ReactNode  is not a constructor function for JSX elements      Type  undefined  is not assignable to type  ElementClass    2605    How do I type this correctly

User · Answer

From the TypeScript site  https   github com Microsoft TypeScript issues 6471      The recommended practice is to write the props type as  children     any    That worked for me  The child node can be many different things  so explicit typing can miss cases    There s a longer discussion on the followup issue here  https   github com Microsoft TypeScript issues 13618  but the any approach still works

User · Answer

The general way to find any type is by example  The beauty of typescript is that you have access to all types  so long as you have the correct  types  files   To answer this myself I just thought of a component react uses that has the children prop  The first thing that came to mind  How about a  lt div   gt    All you need to do is open vscode and create a new  tsx file in a react project with  types react   import React from  react    export default      gt       lt div children   test     gt        Hovering over the children prop shows you the type  And what do you know -- Its type is ReactNode  no need for ReactNode        Then if you click into the type definition it brings you straight to the definition of children coming from DOMAttributes interface      node modules  types react index d ts interface DOMAttributes lt T gt      children   ReactNode               Note  This process should be used to find any unknown type  All of them are there just waiting for you to find them

User · Answer

As a type that contains children  I m using   type ChildrenContainer   Pick lt JSX IntrinsicElements  div     children  gt    This children container type is generic enough to support all the different cases and also aligned with the ReactJS API   So  for your example it would be something like   const layout      children    ChildrenContainer    gt         lt Aux gt           lt div gt Toolbar  SideDrawer  Backdrop lt  div gt           lt main gt               children           lt  main gt       lt Aux  gt

User · Answer

Just children  React ReactNode

User · Answer

React components should have a single wrapper node or return an array of nodes   Your  lt Aux gt     lt  Aux gt  component has two nodes div and main   Try to wrap your children in a div in Aux component   import   as React from  react    export interface AuxProps       children  React ReactNode    const aux    props  AuxProps    gt    lt div gt  props children  lt  div gt     export default aux

User · Answer

The function component return type is limited to JSXElement   null in TypeScript  This is a current type limitation  pure React allows more return types  Minimal demonstration snippet You can either use a type assertion or Fragments as workaround  const Aux    props  AuxProps    gt   lt  gt props children lt   gt    const Aux2    props  AuxProps    gt  props children as ReactElement     ReactNode children  React ReactNode might be suboptimal  if the goal is to have strong types for Aux  Almost anything can be assigned to current ReactNode type  which is equivalent to      undefined   null  A safer type for your case could be  interface AuxProps     children  ReactElement   ReactElement      Example  Given Aux needs React elements as children  we accidently added a string to it  Then above solution would error in contrast to ReactNode - take a look at the linked playgrounds  Typed children are also useful for non-JSX props  like a Render Prop callback

User · Answer

You can use ReactChildren and ReactChild  import React    ReactChildren  ReactChild   from  react     interface AuxProps     children  ReactChild   ReactChildren     const Aux      children    AuxProps    gt    lt div gt  children  lt  div gt     export default Aux   If you need to pass flat arrays of elements  interface AuxProps     children  ReactChild   ReactChild     ReactChildren   ReactChildren

User · Answer

This is what worked for me   interface Props     children  JSX Element     JSX Element     Edit I would recommend using children  React ReactNode instead now

User · Answer

You can also use React PropsWithChildren lt P gt   type ComponentWithChildProps   React PropsWithChildren lt  example   string  gt

User · Answer

you can declare your component like this   const MyComponent  React FunctionComponent    props    gt        return props children

User · Answer

I m using the following type Props     children  React ReactNode     const MyComponent  React FC lt Props gt      children     gt      return        lt div gt          children        lt  div gt        export default MyComponent

User · Answer

A React Node is one of the following types   Boolean  which is ignored  null or undefined  which is ignored  Number String A React element  result of JSX  An array of any of the above  possibly a nested one

User · Answer

This has always worked for me  type Props       children  JSX Element

User · Answer

In order to use  lt Aux gt  in your JSX  it needs to be a function that returns ReactElement lt any gt    null  That s the definition of a function component   However  it s currently defined as a function that returns React ReactNode  which is a much wider type  As React typings say   type ReactNode   ReactChild   ReactFragment   ReactPortal   boolean   null   undefined    Make sure the unwanted types are neutralized by wrapping the returned value into React Fragment   lt  gt  lt   gt     const aux  React FC lt AuxProps gt    props   gt     lt  gt  props children  lt   gt

User · Answer

These answers appear to be outdated - React now has a built in type PropsWithChildren lt    gt   It is defined similarly to some of the correct answers on this page   type PropsWithChildren lt P gt    P  amp    children   ReactNode

[reactjs] TypeScript and React - children type?

Examples related to reactjs

Examples related to typescript

Examples related to jsx

Examples related to typescript2.0