TypeScript and React Children

What happens when we pass in children in React? Children is a special prop that allows us to pass in any type of element. It could be a number, a string, a boolean, an array of elements or even another component. So how can we check the types?

Of cour…


This content originally appeared on DEV Community and was authored by Debbie O'Brien

What happens when we pass in children in React? Children is a special prop that allows us to pass in any type of element. It could be a number, a string, a boolean, an array of elements or even another component. So how can we check the types?

Of course we could define it as any which is basically the same as just not having type checking which defeats the whole purpose of using Typescript.

There are a couple of types we could choose from:

JSX.Element

Children must be a single JSX element. Doesn't allow multiple children, or strings etc.

type ButtonProps = {
  children: JSX.Element
}
const Button = ({ children }: ButtonProps) => <button>{children}</button>

export function Card() {
  return (
    <Button>
      <span>Click me</span>
    </Button>
  )
}

JSX.Element[]

Allows multiple JSX elements but no strings, numbers etc

type ButtonProps = {
  children: JSX.Element[]
}
const Button = ({ children }: ButtonProps) => <button>{children}</button>

export default function Card() {
  return (
    <Button>
      <span>click me</span>
      <i>svg icon</i>
    </Button>
  )
}

JSX.Element | JSX.Element[]

Allows single or multiple JSX elements but no strings, numbers etc

type ButtonProps = {
  children: JSX.Element | JSX.Element[]
}
const Button = ({ children }: ButtonProps) => <button>{children}</button>

export default function Card() {
  return (
    <Button>
      <span>click me</span>
    </Button>
  )
}
export default function Card2() {
  return (
    <Button>
      <span>click me</span>
      <i>svg icon</i>
    </Button>
  )
}

React.ReactChild

Allows one React element, string or number

type ButtonProps = {
  children: React.ReactChild
}
const Button = ({ children }: ButtonProps) => <button>{children}</button>

export default function Card() {
  return <Button>click me</Button>
}

React.ReactChild[]

Allows multiple React elements, strings or numbers

type ButtonProps = {
  children: React.ReactChild
}
const Button = ({ children }: ButtonProps) => <button>{children}</button>

export default function Card() {
  return (
    <Button>
      click me
      <i>svg icon</i>
    </Button>
  )
}

React.ReactChild | React.ReactChild[]

Allows single or multiple React elements, strings or numbers

type ButtonProps = {
  children: React.ReactChild
}
const Button = ({ children }: ButtonProps) => <button>{children}</button>

export default function Card() {
  return <Button>click me</Button>
}

export default function Card2() {
  return (
    <Button>
      click me
      <i>svg icon</i>
    </Button>
  )
}

React.ReactNode

Allows multiple children, strings, numbers, fragments, portals... We could use the above example but it is a little verbose and ReactNode covers a little more.

type ButtonProps = {
  children: React.ReactChild
}
const Button = ({ children }: ButtonProps) => <button>{children}</button>

export default function Card() {
  return (
    <Button>
      click me
      <i>svg icon</i>
    </Button>
  )
}

Conclusion

And that's it, you now have no excuses for adding type checking for your children.

Useful Links


This content originally appeared on DEV Community and was authored by Debbie O'Brien


Print Share Comment Cite Upload Translate Updates
APA

Debbie O'Brien | Sciencx (2022-01-11T14:41:19+00:00) TypeScript and React Children. Retrieved from https://www.scien.cx/2022/01/11/typescript-and-react-children/

MLA
" » TypeScript and React Children." Debbie O'Brien | Sciencx - Tuesday January 11, 2022, https://www.scien.cx/2022/01/11/typescript-and-react-children/
HARVARD
Debbie O'Brien | Sciencx Tuesday January 11, 2022 » TypeScript and React Children., viewed ,<https://www.scien.cx/2022/01/11/typescript-and-react-children/>
VANCOUVER
Debbie O'Brien | Sciencx - » TypeScript and React Children. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/11/typescript-and-react-children/
CHICAGO
" » TypeScript and React Children." Debbie O'Brien | Sciencx - Accessed . https://www.scien.cx/2022/01/11/typescript-and-react-children/
IEEE
" » TypeScript and React Children." Debbie O'Brien | Sciencx [Online]. Available: https://www.scien.cx/2022/01/11/typescript-and-react-children/. [Accessed: ]
rf:citation
» TypeScript and React Children | Debbie O'Brien | Sciencx | https://www.scien.cx/2022/01/11/typescript-and-react-children/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts