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: