The render method of our React component is only allowed to return a single node. To illustrate that, right here after the H1, I'm going to create a second node. It's a bold tag with an inner HTML of bold. We can see we do in fact get an error here. "Adjacent JSX elements must be wrapped in an enclosing tag."
The way that we solved this is by wrapping our nodes in a parent node. I'm just going to create a div here. I'm going to wrap these guys, our H1 and our tag, in that div.
Let me just clean this up a little bit, save that, and we can see on the right everything is working as expected.
You'll notice I am wrapping my JSX in parentheses. I can go ahead and get rid of those. Everything will work fine if I bring the first line of our JSX up to the same line as the return statement.
That's going to work just fine, but as soon as I put it onto the next line, it is in fact going to break. I just as a preference, not a requirement, wrap my JSX in parentheses just so that I can utilize all the white space.