One of the nicest thing in React is we can render components and elements conditionally.
Single Page applications are dynamic and event driven in nature. To make this possible
React has one feature called conditional rendering.
Wait what do you mean by rendering ?
By Rendering we mean to say that updating the page view based on changes in its state or props.
React components need to often display different user interface based on different conditions.
This concept is often applied in different situations:
- Rendering external data from an API
- Showing or hiding elements
- Toggling application feature
- implementing permission levels
- Handling authentication and authorization
Lets see some ways of implementing conditional rendering in ReactJS
We have have a PackingList component rendering several Items, which can be marked as packed or not
Method 1
In Some situations we may not want to render anything at all. In that case we can return null
if (condition){ return <div>{name}<div>; } return null; If condition is true, it will return JSX to render, or else it returns null
Its not common to return null from component.
// App.jsx function Item({ name, isPacked }) { if (isPacked) { return null; } return <li className="item">{name}</li>; } export default function PackingList() { return ( <section> <h1>Sally Ride's Packing List</h1> <ul> <Item isPacked={true} name="Space suit" /> <Item isPacked={true} name="Helmet with a golden leaf" /> <Item isPacked={false} name="Photo of Tam" /> </ul> </section> ); } Method 2 using ternary operator ?
return ( <div> {condition ? name + ' ✔' : name} </div> ) In the above code if condition is true (?)
then render name + ' ✔', or else ( : ) render name
// App.jsx function Item({ name, isPacked }) { return ( <li className="item"> {isPacked ? ( <del> {name + ' ✔'} </del> ) : ( name )} </li> ); } export default function PackingList() { return ( <section> <h1>Sally Ride's Packing List</h1> <ul> <Item isPacked={true} name="Space suit" /> <Item isPacked={true} name="Helmet with a golden leaf" /> <Item isPacked={false} name="Photo of Tam" /> </ul> </section> ); } Method 3 using Logical AND operator ( && )
return ( <div> {name} {condition && '✔'} </div> ) JavaScript && expression returns the value of its right side
if the lift side (condition) is true. But if the condition on left side is false
the whole expression becomes false, and dosen't render anything in its place.
We shouldn't put numbers on the left
side of && .JavaScript converts the left side to a boolean automatically. However, if the left side is 0, then the whole expression gets that value (0), and React will happily render 0 rather than nothing.
// App.jsx function Item({ name, isPacked }) { return ( <li className="item"> {name} {isPacked && '✔'} </li> ); } export default function PackingList() { return ( <section> <h1>Sally Ride's Packing List</h1> <ul> <Item isPacked={true} name="Space suit" /> <Item isPacked={true} name="Helmet with a golden leaf" /> <Item isPacked={false} name="Photo of Tam" /> </ul> </section> ); } Conditionally assigning JSX to a variable
The above 3 methods were shortcuts if theat becomes tricky or hard to use,
we can use if statement and a variable. You can
reassign variables defined with let
let itemContent=name; Use an if statement to reassign a JSX expression to itemContent if
isPacked is true
if (isPacked) { itemContent = name + " ✔"; } Curly braces open the “window into JavaScript”.
Embed the variable with curly braces in the returned JSX tree,
<li className="item"> {itemContent} </li> This style is the most verbose, but it’s also the most flexible. Here it is in action:
function Item({ name, isPacked }) { let itemContent = name; if (isPacked) { itemContent = ( <del> {name + " ✔"} </del> ); } return ( <li className="item"> {itemContent} </li> ); } export default function PackingList() { return ( <section> <h1>Sally Ride's Packing List</h1> <ul> <Item isPacked={true} name="Space suit" /> <Item isPacked={true} name="Helmet with a golden leaf" /> <Item isPacked={false} name="Photo of Tam" /> </ul> </section> ); }