Conditional rendering is nothing but rendering based on some conditions like if-else conditions in JavaScript.
React is component based so we can have different components and add some conditions to render them only when the condition is satisfied.
In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
Example
Let’s add couple of components:
In the code above, we have two components. We want them to be rendered differently based on the hour of the day. Here’s how we can do that using some JavaScript code in React.
How to store elements in variables?
We can store elements in variables and then render just some part of the component.
We can create a stateful component that will render depending on its current or previous state.
Source: React Docs
conditions examples render variables
