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.