Fragments in React v16

Fragments is a new feature in React v16.0 which allows us to return multiple child elements/components/strings from a component without using a wrapper like <div> or <span>. Prior to react v16.0 this was not possible. Make sure that you include the "Key" attribute while returning multiple elements.

Below examples show how Fragments can be used in React 16.


Before React 16
render() {
  return (<div>
    <ChildComponent1 (or) Element1>,
    <ChildComponent2 (or) Element2>,
    <ChildComponent3 (or) Element2>,
    </div>
    );
}

React 16 with Fragments
render() {
  return [
    <ChildComponent1 (or) Element1 key="1">,
    <ChildComponent2 (or) Element1 key="2">,
    <ChildComponent3 (or) Element1 key="3">,
  ];
}