12. JSX Conditionals: &&


#1

Can someone explain to me the logic behind this code. Thanks!.

var React = require('react');
var ReactDOM = require('react-dom');

// judgmental will be true half the time.
var judgmental = Math.random() < 0.5;

var favoriteFoods = (
  <div>
    <h1>My Favorite Foods</h1>
    <ul>
      <li>Sushi Burrito</li>
      <li>Rhubarb Pie</li>
      {!judgmental && <li>Nacho Cheez Straight Out The Jar</li>}
      <li>Broiled Grapefruit</li>
    </ul>
  </div>
);

ReactDOM.render(
	favoriteFoods, 
	document.getElementById('app')
);


#2

Hi,

When we use Math.random(), it will generate some random number between 0 and 1.
Suppose when you run your program first time, it may generate 0.3, which is less than 0.5. So

var judgemental = true

and

!judgemental = false

While using && operator if one of the condition becomes false, then the whole condition results as false. So the list

<li>Nacho Cheez Straight Out The Jar</li>

does not get rendered along with other list items.
If you run your code again and again Math.random() will generate different numbers , if the number is > 0.5, value of var judgemental becomes false. If number is < 0.5, value of var judgemental becomes true.
Hope this helps.


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.