In the React world, This is called Conditional Rendering using the &&
operator. This technique leverages how Javascript short-circuits comparisons to change the view; in this case, a logged value. It is a concise and useful way to dynamically render different objects as properties change.
If you weren't rendering, it would just be a good old-fashioned short-circuit, which has been used for decades, and goes all the way back to Kernaghan and Ritchie and C language. E.g. the OR operator can be used when referencing object properties to guard against undefined
values; e.g.:
const cheese = {}
console.log(cheese.cheddar) // unsafe
console.log(cheese.cheddar || "") // safe
Here, we don't really care about the actual value, we just need a truthy
or falsy
resolution.
Also note the double-bang !!
operator, which will convert the whole darn expression to a boolean:
console.log(!!(true && "hello world")) // true
References:
https://reactjs.org/docs/conditional-rendering.html
https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb
What is the !! (not not) operator in JavaScript?