Conditionally Render A React Component
In this lesson, we will explore JSX a little further by looking at how to conditionally render JSX with a Javascript ternary operator. We will see how JSX is simply syntax sugar on top of the React API: React.createElement.
Instructor: [00:01] 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.
[00:14] 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.
[00:40] 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.
[01:04] This is functionally equivalent to what we had before. This is just what the JSX would be transpiled down to. With it like this, we can see that this is really just JavaScript. Instead of this if statement, we could do a ternary where we'd say return message?, and then if there is a message, then we'll do React.createElement with that message.
[01:25] 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.
[01:40] If we wanted to wrap all of this inside of yet another div, then what we can do is we'll take this. I'm going to cut it out, and we'll make a div. Then we have to interpolate our JavaScript syntax into here. That is functionally equivalent, except now we're wrapping everything inside of a div.
[01:55] When you start into JSX, you need to open up some interpolation to do any of the JavaScript stuff that you see in here. This is why very often in React code in the render method, you'll see the use of ternaries, because the curly braces must accept an expression in there.
[02:13] 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.
[02:26] 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.
Should probably just use <div>{message ? message : 'No Message'}</div> (DRY)
Aaron, Yep, that would work well too 👍
Great video! Just one question, why put parentheses wrapping ternary conditions?
{message ? <div>{message}</div> : <div>No message</div> }
This works too but I suppose there is an explanation about being more careful with parentheses wrapping :)
Hey Emilio! The parentheses is just formatting to make it easier to read/update. It comes by default with prettier. I hope that's helpful. Good luck!
Should probably just use
<div>{message ? message : 'No Message'}</div>(DRY)
Why not a simpler version? ;) <div>{message || 'No message'}</div>
Would using default parameters in a situation like this be considered an OK practice?
For example:
const Message = ({ message = "No Message" }) => <div>{message}</div>;
To render with 'No Message' could be used as either:
<Message /> or <Message message={undefined} />
Yes Bobby, that'd probably be a better component. And Francisco, that'd work as well. This lesson was intended to solidify the understanding that JSX is simply a light abstraction on top of React.createElement and can therefore be used like you would use regular JavaScript.
In Transcript, first code block. Script section w/ Babel.js, change "type" to "src".
In Transcript, first code block, I think you're closing your <script type="text/babel"></script> too early.
shouldn't the closing tag come after the ReactDOM.render() function?
Great video! Heads up, in the transcript the last code snippet has a typo "redner"