How can you write a conditional, if you can’t inject an if
statement into JSX?
Well, one option is to write an if
statement, and not inject it into JSX.
Look at if.js. Follow the if
statement, all the way from line 6 down to line 18.
if.js works, because the words if
and else
are not injected in between JSX tags. The if
statement is on the outside, and no JavaScript injection is necessary.
This is a common way to express conditionals in JSX.
Instructions
Select app.js.
Starting on line 16, write an if/else
statement, using if.js as a guide.
If (coinToss() === 'heads')
, then execute img = <img src={pics.kitty} />
.
Inside of the else
clause, execute img = <img src={pics.doggy} />
.
In other words, if the coin lands heads then you should get a picture of a kitty, and if the coin lands tails then you should get a picture of a doggy.
At the bottom of the file, call ReactDOM.render()
.
For ReactDOM.render()
‘s first argument, pass in img
.
For ReactDOM.render()
‘s second argument, pass in document.getElementById('app')
.
Click Run. Refresh the browser several times. Does the picture change?