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.
Great video! Heads up, in the transcript the last code snippet has a typo "redner"
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?