I am quite stuck in a refactored ternary operator while learning react. Here is the code I came across inside a JSX:
{props.openSpots === 0 && <div className="card--badge">SOLD OUT</div>}
I would like to ask why this will return the card--badge div? I am only familiar with the complete common ternary operator that looks like this instead:
{props.openSpots === 0 ? <div className="card--badge">SOLD OUT</div> : null}
Thank you very much.
AND operator looks for the second argument if the first argument is true.
But, if first argument is false it does not look for second argument, and directly returns false.
true && statement == statement;
false && statement == false;
console.log(
true && "I am visible"
)
console.log(
' ' && "I am visible"
)
console.log(
false && "I am not visible"
)
console.log(
0 && "I am not visible"
)
console.log(
null && "I am not visible"
)
console.log(
undefined && "I am not visible"
)
console.log(
true && '' && "I am not visible"
)From the react documentation:
It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.
Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.
See: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator