Instructor: Here, we have a handy message component that renders a message inside of a div. What if we don't actually pass a message at all? What if that message were to be null, for example? That's not going to render anything.
In our case, we want to have it render no message. What we're going to do here is we'll say if there is not a message, then we'll return a div with no message. Otherwise, we'll return that message. Now, we can have hi there. That'll render hi there, and then we can also have null to render no message.
Now, the key takeaway here is that JSX is simply an abstraction on top of React.createElement We'll say React.createElement, div, null for the props, and then no message will be a string for the children. We'll do the same thing here with React.createElement with a div, null, and then the message.
Otherwise, we'll do React.createElement with no message. Then we can remove all of this, and that's functionally equivalent as well. We can put a message in here, and that works also.
That's why you'll see ternaries, because you can't have an if statement in here. That doesn't work in there. Using ternaries to conditionally render different components is a really nice way to compose these components together.
Let's go ahead and refactor this back to JSX, because it looks a little bit nicer. I'll say div with message, and then div with no message. Then we can change this to null to get our no message.