mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 15:18:01 +00:00
30 lines
1.1 KiB
Markdown
30 lines
1.1 KiB
Markdown
# Mapping Over One Or Many Children
|
|
|
|
In [Dynamically Add Props To A Child
|
|
Component](https://github.com/jbranchaud/til/blob/master/react/dynamically-add-props-to-a-child-component.md),
|
|
I talked about how a child element can be reconstituted with additional
|
|
props. The approach I showed will only work in the case of a single child
|
|
being nested in that component. What if you want your component to account
|
|
for one, many, or even children?
|
|
|
|
React comes with a built-in function for mapping that handles these cases.
|
|
|
|
```javascript
|
|
const ParentWithClick = ({ children }) => {
|
|
return (
|
|
<React.Fragment>
|
|
{React.Children.map(children || null, (child, i) => {
|
|
return <child.type {...child.props} key={i} onClick={handleClick} />;
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
```
|
|
|
|
The [`React.Children.map`
|
|
function](https://reactjs.org/docs/react-api.html#reactchildrenmap) allows
|
|
mapping over one or many elements and if `children` is `null` or
|
|
`undefined`, it will return `null` or `undefined` respectively.
|
|
|
|
See a [live example here](https://codesandbox.io/s/kwj29y2j2r).
|