Skip to content

Latest commit

 

History

History
23 lines (18 loc) · 824 Bytes

17.react-fragments.md

File metadata and controls

23 lines (18 loc) · 824 Bytes

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:

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: