From b6c63250b7836c4cbe2e3e7ef863332c0a614926 Mon Sep 17 00:00:00 2001
From: Eli Sokeland <elisokeland@yahoo.com>
Date: Tue, 16 Nov 2021 23:03:05 -0500
Subject: [PATCH] Create 33.react-fragments.md

---
 patterns/33.react-fragments.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 patterns/33.react-fragments.md

diff --git a/patterns/33.react-fragments.md b/patterns/33.react-fragments.md
new file mode 100644
index 0000000..112f255
--- /dev/null
+++ b/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