Create 33.react-fragments.md

patterns/33.react-fragments.md

@@ -0,0 +1,23 @@
+# React Fragments
+
+React fragments are used whenever a component needs returned with multiple children.
+
+Specifically, fragments are useful when I don't want to clutter the DOM with unnecessary `<div>` tags that are used purely to wrap children in a React render method.
+
+For example, React fragments are commonly used to render list items:
+```javascript
+render() {
+    return (
+      <React.Fragment>
+        <td>Table Cell 1</td>
+        <td>Table Cell 2</td>
+      </React.Fragment>
+    );
+  }
+```
+
+This solves the issue of breaking the DOM HTML table specifications by not adding unnecessary `<div>` elements around `<td>` elements.
+Do keep in mind, if it is a list being rendered, React does still throw warnings when children don't have the `key={}` prop.
+
+### Related links:
+- https://reactjs.org/docs/fragments.html