From f92897b27bc78a30339e843bb453b3504c9b9676 Mon Sep 17 00:00:00 2001 From: Jeswin Simon Date: Thu, 1 Oct 2020 15:40:16 +0530 Subject: [PATCH] Updated conditional rendering doc with a note on Falsy values (#3296) --- content/docs/conditional-rendering.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index ec372541..8c85ee84 100644 --- a/content/docs/conditional-rendering.md +++ b/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, `
0
` will be returned by the render method. + +```javascript{2,5} +render() { + const count = 0; + return ( +
+ { count &&

Messages: {count}

} +
+ ); +} +``` + ### 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).