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 `
` 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 ( + + Table Cell 1 + Table Cell 2 + + ); + } +``` + +This solves the issue of breaking the DOM HTML table specifications by not adding unnecessary `
` elements around `` 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