DEV Community

TypeScript and React Children

Debbie O'Brien on January 11, 2022

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 s...

Read full post

Konstantin Komelin • Jan 11 '22

Hi Debbie,

Here is how I play with children:

import { FC, PropsWithChildren } from 'react';

type Props = {
  /* Other custom props */
}
const Component1:FC<PropsWithChildren<Props>> = ({children}) => {
  return (
    <>Component code</>
  )
}

Aniello Del Sorbo • Jan 12 '22

FC already accepts children, no need for PropsWithChildren.

If you don't want want children, you can use VFC.

dale tan • Apr 12 '22 • Edited

This is no longer true for FC with React 18. You must either use PropsWithChildren or explicitly add a children prop to your type definition.

Debbie O'Brien • Apr 12 '22

you're right. thanks for the comment.

Konstantin Komelin • Jan 12 '22

Thank you Aniello! Good to know.

Debbie O'Brien • Jan 12 '22

thanks guys, will play around with it

Renato Rodrigues • Jan 13 '22 • Edited

Nice article! There is only a small mistake on the last example where it reads children: React.ReactChild instead of children: React.ReactNode

Debbie O'Brien • Jan 24 '22

ooops. thanks just corrected it. nice catch

JamieBarlow • Aug 27

Hi Debbie, just came across this as it's missing from a number of courses I've used - a little surprising as React props are mentioned, but not the commonly used 'children' prop! Thanks for laying this out so clearly.