Add Mapping Over One Or Many Children as a react til

react/mapping-over-one-or-many-children.md

@@ -0,0 +1,29 @@
+# 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).