Conditional Rendering

WELCOME TO DUCAT INDIA Conditional Rendering 7070905090 info@ducatindia.com

Conditional Rendering Condition Rendering is used to represent output by applying conditions in code with three different approached which is fetched while rendering of code. Suppose we have a code with following condition-: If user is logged in then display ‘you’re welcome’ if not logged in then display ‘Welcome guest’

For Example we put conditions on code with three different approaches. • First Approach-: If-Else is first approach. Using If-Else in JSX is not valid so use it outside JSX code as-:

Second Approach Elements Variable- Use JavaScript variables to store elements as-: • Third Approach Ternary conditional operator- Here conditional operator is used. It can be easily used in JSX as-:

Fourth Approach Short Circuit Operator- This Approach is just specific case of ternary conditional operator. You must render something or nothing using short circuit approach.

Prevent rendering with Null Advantage of returning “null” instead of empty element is that performance will be improved of the app because react wont Unmount component to replace.

React Element Variables If you don’t want more than one return statement so to avoid writing return Statement again and again use a variable to store the JSX elements and only initialize it when condition is “true”

THANK YOU 7070905090 info@ducatindia.com

Conditional Rendering