Hi Dev’s👋🏻, Lets see what is Conditional Rendering in React?
Conditional Rendering in React Works the same way conditions work in javascript.
Use JS operates like if or the conditional ternary operator to create elements representing the current state, and let react update the UI to match them📒.
if and if else statements don’t work inside JSX. This is because JS is just syntactic sugar for function calls and object construction.
So the TL:DR is if you want to do conditional rendering with if you have to use it before the return keyword not after it. If you want to use after return you have to use Ternary Operator.
Syntax:
function com(props){
if(something){
return <></>
}return <></>
}
Inline if with Logical && operator:
You may embed javascript expressions in JSX by wrapping them in curly braces. This includes the Javascript logical operators.
For example, you want to render a component if a certain condition is true then.
{isTrue && <User/>} // If the isTrue is true then it will render <User/>Inline if-else with the conditional operator😁:
Syntax:
{Condition?Expression_1: Expression_2}
If the condition is true it will return expression_1 else it will return expression_2.In the next article I will be writing about Lists in React🤔 ?
That’s all for Today, Stay Tuned and I will see you in the next one👋🏻.
Thanks for Following and Claps😋
