React: A component render can return only one element!

/ Chris Nielsen

A component render can return only one element, so if you want more complicated HTML output from your component’s render, it needs to be returned in a single div. In other words, every component can return only a single div.

This applies to ReactDOM.render also. So if I want to render a Movie component three times, I need to package the three movie elements into a single div. For example:

ReactDOM.render(
  <div>
    <Movie title="Avatar" genre="action"/>
    <Movie title="Pee Wees Big Adventure" genre="adventure"/>
    <Movie title="Star Wars" genre="sci-fi"/>
  </div>,
document.getElementById('app')
);

If you look at the render portion of every component in my React tic-tac-toe game, you will see that all of the HTML output, no matter how much is there, is always returned in a single div.

For complete React code that demonstrates this in action, see my tic-tac-toe react script here:
https://github.com/chris-relaxing/react-tic-tac-toe/blob/master/tic-tac-toe.js