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
However, this limits what we can put within the button. We couldn't put an
<svg> icon, for example.
Using the type
ReactNode as the type of the
title prop, we can now pass arbitrary React elements.
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
right, then we probably wouldn't make either of these the
children, since neither is more "main" or "primary" than the other.