Render Conditionally with a Ternary

When you need to render JSX conditionally, you need to use a ternary operator.

There are no if/else statements allowed inside a block of JSX.
Fortunately, JavaScript has us covered.
We can use a ternary operator — a single line expression for conditionals.

The ternary operator looks like this:

someCondition ? doTheTruthyThing() : doTheFalsyThing(); 

They can be used for assignments.

let activity = happyAndKnowsIt ? "clap hands" : "brood"; 

And — in JSX — they can be used for conditional rendering.

return ( <div> {pokemon ? <Pokemon name={pokemon.name} /> : <div>couldn't catch 'em all.</div> } </div> ) 

Give it a try

Try you new skills right in the browser.
Go to this sandbox.

Assignment:
Use the Conditional (ternary) operator to render a <Pokemon /> only when we have one to render.

1. Add a ternary expression. Remember to interpolate it with {} curly braces
2. If we have a Pokemon to render, render it using the Pokemon Component
3. If we don't have a Pokemon, show the index for the Pokemon we're missing

Subscribe to all my web developer videos on YouTube:

Follow the 🧵 on Twitter: