Conditional Rendering in React:

Conditions and their handling:

Conditions are very common situations that we face while developing or designing something. For ex. What to develop and what to ignore. Usually the condition that says- “Do it” is considered TRUE whereas the condition that says- “Don’t do it” is considered FALSE.

Almost every computer language possesses this feature and so does React. In one of the previous lessons while discussing JSX and its features, we gone through an image:

const a = 2
function App() {
	if(a==1) {
		return <p> Text 1 </p>
	} else {
		return <p> Text 2 </p>
	}
}
);

This code snippet shows that multiple returns can be handled in JSX but only if packed under some conditions. Here we seen for the first time, how an if-else statement works in React. However it’s not the only way to induce conditional rendering. We have following four ways either:

Simple if-else statements
Using Element Variables
Using Ternary Operator
Using Short Circuit Operator

if-else statements:

If-else statements are pretty common in many languages. A condition is tested to be either TRUE or FALSE, if it is TRUE, a certain part of code executes. Similarly if it is false, another part of code executes.

class First extends Component {
  constructor() {
      super();
	 this.state = {
		isLoggedIn: false
 }
  }
  render(){
	 if(this.state.isLoggedIn) {
 	return (
	<div> You are Successfully Logged In </div>
);
 }
 else {
 	return (
	<div> Log In Please !!! </div>
);
 }
      
   }
}
export default First;

Here in this code:

Look at the way state is written.
The values of state is checked by if statement.
Since by default, it is false; else block is active.

Element Variables:

Since we all know that JSX allows us to assign a complete HTML element to a variable. We can use this feature to conditionally assign different elements in the same variable. Further that variable can be rendered on the screen.

class First extends Component {
  constructor() {
      super();
	 this.state = {
		isLoggedIn: false
 }
  }
  render(){
	 let prompt
	 if(this.state.isLoggedIn) {
 	prompt =	<div> You are Successfully Logged In </div>
 }
 else {
 	prompt =	<div> Log In Please !!! </div>
 }
	 return (
	 	<div>{prompt}</div>
 );
  }
}
export default First;

Here in this code:

Look at the way variable prompt is defined.
The values of state is checked by if statement and based on the condition different messages are assigned to the variable prompt.
Finally prompt is returned in a div.

Ternary Operator:

Ternary operators are also pretty common in many languages. This operator uses two symbols ? and : in the following way-

Important is to keep the entire statement as one single statement.

class First extends Component {
  constructor() {
      super();
	 this.state = {
		isLoggedIn: false
 }
  }
  render(){
	 return this.state.isLoggedIn ? (
 	<div> You are Successfully Logged In </div>
 ) : (
 	<div> Log In Please !!! </div>
 )
  }
}
export default First;

Here in this code:

Look at the way return statement is written it has embedded a ternary operator.
The value of this.state.isLoggedIn is tested in a ternary operator.
When it is false, the second div is displayed and similarly when it is true, the first div is displayed.

We can also use the ternary operators to render a certain part or block of a statement.
Look at the code below:

class First extends Component {
render() {
  const isLoggedIn = false;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.</div>
  );
}
}
export default First;

Short Circuit Operator:

Short circuit operators are also quite common but in the languages influenced by JAVA. JavaScript also uses short circuit operators. In these operators, the condition to the left of && is tested and when found to be TRUE, the statement to the right of it executes. Interestingly when the condition is found to be false, nothing is executed.

class First extends Component {
  constructor() {
      super();
	 this.state = {
		isLoggedIn: false
 }
  }
  render(){
return this.state.isLoggedIn && <div> You are Successfully Logged In </div>
  }
}
export default First;

Here in this code:

Look at the way return statement is written it has included a short-circuit operator.
The value of this.state.isLoggedIn is tested in a short-circuit operator.
When it is false, nothing is displayed and similarly when it is true, the written div is displayed.