React Fragment

React.Fragment

 

The React.Fragment component lets you return multiple elements in a render() method without creating an additional DOM element:

 

render() {

  return (

    <React.Fragment>

      Some text.

      <h2>A heading</h2>

    </React.Fragment>

  );

}

 

You can also use it with the shorthand <></> syntax.

 

Keyed Fragments

 

Fragments declared with the explicit <React.Fragment> syntax may have keys. A use case for this is mapping a collection to an array of fragments — for example, to create a description list:

 

function Glossary(props) {

  return (

    <dl>

      {props.items.map(item => (

        // Without the `key`, React will fire a key warning

        <React.Fragment key={item.id}>

          <dt>{item.term}</dt>

          <dd>{item.description}</dd>

        </React.Fragment>

      ))}

    </dl>

  );

}

key is the only attribute that can be passed to Fragment.