Conditional rendering in react

React is a javascript library user interface and can be used for developing we mobile and desktop applications. It is good for creating reusable modular and maintainable components.

Conditonal rendering in react is a procedure that is applied to render different components or elements based on certain conditions.

This is obtainable by using javascript conditional statement such as if else and switch , the following are some of the ways to implement conditonal rendering in react.

if else statement:

jsx

render( {

if(condition) {

return<componentA />

)else{

return<componentB />

}

}

}

Tenary Operator: This is a shortand for if else statements

jsx

render() {

return condition

<componentA />

<componentA />

}

Switch Statement: Switch statement is used based on different condition

jsx

render() {

switch(condition){

return<componentA />

return<componentB />

}

Early Return: This is rendered if the condition is true

jsx

render({

if(condition){

return null

)

return <componentA />

}

}