React Holiday

Make Components Arrays

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 (
      Let's <strong> GO!!!</strong>

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!