How to Pass Props to Children in React

React components can render the content nested between their tags through props.children. Rendering that content does not automatically add props to the elements inside it. To share a value with descendants, use Context; to add a prop to one known child element, use React.cloneElement().

For example, a messaging dialog may receive text, an emoji, or a combination of elements. Its reusable component does not need to know that content in advance: it can render props.children wherever the dialog body belongs.

Passing Props to Children in React

A wrapper can display its nested content by returning {children} inside its markup. For example, function Box({ children }) { return <div>{children}</div>; } renders whatever a parent places between <Box> and </Box>. A parent can compose it with a child as in function App() { return <Box><Text /></Box>; }.

That composition passes the Text element as the children prop to Box; it does not set a color prop on Text. If the child needs a value, pass it explicitly when creating the child, such as <Text color="red" />, or choose one of the approaches below when the wrapper needs to supply that value.

These JSX fragments illustrate component wiring and assume React is available in the application; they are not standalone files or reported runtime output. The child can read the value with a function signature such as function Text({ color }) { return <p style={{ color }}>Welcome to App</p>; }.

Passing Props to Children in React Using the Context API

Use Context when multiple components in a subtree need the same value and passing it through each intermediate component would add unnecessary wiring. Context makes a value available to consumers below its provider; it is separate from props and does not literally pass a prop through every component.

Create a context, for example const ColorContext = React.createContext("black");, and place a provider around the content that needs the value: <ColorContext.Provider value="red">{children}</ColorContext.Provider>. A descendant can read it with const color = React.useContext(ColorContext); and apply it, for example with <p style={{ color }}>Welcome to App</p>. The provider’s value is available to components rendered within that provider, so keep the provider around the subtree that needs it. The default value is used only when a consumer has no matching provider above it. If a matching provider exists, the consumer receives its supplied value, including undefined, instead of the default.

This approach fits values such as a theme or locale that several descendants use. For one child that needs a single additional value, cloning may be more direct.

Passing Props to Children in React Using React.cloneElement()

React.cloneElement() creates a new element from a valid React element and a set of props. A wrapper can use React.cloneElement(children, { color: "red" }) to add or override color on one child while retaining the child’s other props. The child can then use color as in the Text example above.

This approach expects children to be one valid React element. props.children can instead be text, several elements, or another shape, so check or otherwise handle its shape before calling React.cloneElement(); arbitrary text and multiple children cannot be passed to this single-element form as though they were one element. If the wrapper should accept varied content, render it unchanged or use Context when descendants need a shared value.

Choose Context for a value used across a subtree. Choose React.cloneElement() when the wrapper intentionally modifies one known child element. Neither approach changes the basic role of props.children: it represents the nested content supplied by the parent.