Browse Source

Updated conditional rendering doc with a note on Falsy values (#3296)

main
Jeswin Simon 4 years ago
committed by GitHub
parent
commit
f92897b27b
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 13
      content/docs/conditional-rendering.md

13
content/docs/conditional-rendering.md

@ -152,6 +152,19 @@ It works because in JavaScript, `true && expression` always evaluates to `expres
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.
Note that returning a falsy expression will still cause the element after `&&` to be skipped but will return the falsy expression. In the example below, `<div>0</div>` will be returned by the render method.
```javascript{2,5}
render() {
const count = 0;
return (
<div>
{ count && <h1>Messages: {count}</h1>}
</div>
);
}
```
### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator}
Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).

Loading…
Cancel
Save