Conditionally Render A React Component

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?