Arrays are special in React. I know, I know. I’m beating a dead horse with this array thing. But did you know that components can return arrays too?

function MyComponentReturnsAnArray() {
  return ["Let's", <strong> GO!!!</strong>];
}

It looks weird but it’s totally valid.

Returning arrays from components is such a valuable pattern that React has a tool for expressing arrays with JSX. It’s the React.Fragment component. And it’s entire job is to return a JSX-expressed array:

function MyComponentReturnsAnArray() {
  return (
    <React.Fragment>
      Let's <strong> GO!!!</strong>
    </React.Fragment>
  );
}

Take it Home

Take yesterday’s CodaSandbox and update the as prop default to a React Fragment. Be sure to inspect the results in the DevTools. No added DOM elements!