React Fundamentals: The Render Method
The render method is where the magic happens in your React components. This lesson will introduce you to this method and its use.
Transcript
The render method of our React component is only allowed to return a single node, so to illustrate that right here after our H1 we're going to have a bold tag with an innerHTML of bold, and if we check out our dev tools we're going to see we actually have an error here. It says, "Adjacent JSX elements must be wrapped in an enclosing tag."
Now the reason this doesn't work is it's basically the equivalent of trying to return two functions, and that function is React.createElement so it's really like we're trying to return one of those, and then another one of those. That's not going to translate well to JavaScript. So what we're going to do to solve this, is wrap these guys in a single node, so that's just going to be a DIV, save that, and everything is working as expected.
Now one thing you'll notice that I'm doing here, and this is just a preference, is I'm wrapping my JSX in parentheses. This isn't required, and a way to overcome that is to just bring the first JSX portion of our return onto the same line as the return statement. If I save that everything's going to work just fine. However, if I want to utilize all the white space and I don't wrap this in parentheses, it is not going to work, so I'm just going to go ahead and wrap this in parentheses once again.
Save that, and we're looking good. Again, this is just a preference, you don't have to do it that way, but I find that it allows me to utilize the white space better when I do wrap my JSX in parentheses.