Arbitrary Children

Creating a reusable button

Suppose we wanted to create a reusable Button component, where we can pass the content within it as a prop. One approach would be to have a title prop of type string:

However, this limits what we can put within the button. We couldn't put an <svg> icon, for example.

ReactNode

Using the type ReactNode as the type of the title prop, we can now pass arbitrary React elements.

The children prop

Typically if the component has what seems like a "main" or "primary" content area, we'll use the prop children for that content. This lets us preserve the tree-like hierarchy of our JSX code. If a component has multiple props that can take arbitrary content, e.g. a left and right, then we probably wouldn't make either of these the children, since neither is more "main" or "primary" than the other.