Correctly typing children props in React with TypeScript

This post is really just a note to myself on how to correctly type children props in React with TypeScript. I’ve found myself having to look this information up several times, so I’m writing it down here so I can find it easily.

// For typing required children props
type Props = {
  children: React.ReactNode;
};

const Component = ({ children }: Props): React.ReactNode => {
  return <div>{children}</div>;
};

// For typing optional children props
type Props = {
  children?: React.ReactNode;
};

const Component = ({ children }: Props): React.ReactNode => {
  return <div>{children}</div>;
};

I hope this helps someone else as well.