Conditional Rendering in ReactJS

In this tutorial, we will be learning about the term conditional rendering. This is very similar to real-life when a customer goes to a shop a shopkeeper always show the items that he is selling and never show/tell customers about his income or profit. Conditional rendering is one and the same thing.

What is Conditional Rendering?

In technical terms, conditional rendering is that seeking the condition of the state and analyzing the state and then displaying the content. We can use conditional rendering inside the react by using the state, we can analyze in which state the react app is and then by using the conditional statement of JavaScript like if-else, switch-case or ternary operator we can render the content and UI.

The Diagram of the Conditional Rendering

In the example below, we will learn to render contact Number on a click of a button

Create a react app using the command.

PS D:\work\Codebun\React> npx create-react-app seventh_app

Clean the extras in the app
Create a component folder inside the src directory
Create a file named Contact.js
Import React and custom CSS if any.
Create a functional component named contact and return the JSX with <div> and some resource.
Export the Component.

Contact.js

import React from 'react';
import "../App.css"

const Contact = () =>{
    return (
    <div className="container">
       <h1>Welcome to CodeDec</h1>
       <h2>The information below is precious</h2>
    </div>
    )
} 

export default Contact;

Inside the App.js file import React and Component from react
Import Contact component and custom CSS if any.
Create a class-based component and create a state property and set it to false.
```
state = {
  show: false 
}
```
Create a function to toggle state inside that create a variable that stores the current State value and use it to change the state.
```
showDetail = () =>{
const doesShow = this.state.show;
  this.setState(
    { show: !doesShow }
  );
}
```

Inside the render create a Number component set it to null initially and check for the state property and set it likewise.

let Number = null;

  if(this.state.show){
    Number = (
      <p style={ { marginLeft:'500px' }}>This is the contact number of codedec : 0000000000</p>
    )
  }

Return JSX inside <div> wrap Contact, {Number} and button to toggle the state.
In that button set the onClick event to the showDetail function as we have seen the previous tutorial.
Export the App component.

App.js

import React, {Component} from 'react';
import Contact from './Components/Contact'
import './App.css';




class App extends Component{
  state = {
    show: false 
  }



  showDetail = () =>{
  const doesShow = this.state.show;
    this.setState(
      { show: !doesShow }
    );
  }


render() {

  let Number = null;

  if(this.state.show){
    Number = (
      <p style={ { marginLeft:'500px' }}>This is the contact number of codedec : 0000000000</p>
    )
  }

  return(
    <div >
      <Contact  />
      {Number}
      <button className="reset-btn" onClick={this.showDetail} >Show</button>

 </div> 
  )
}
 
}

export default  App;

Output:-

Note:- The button is Toggle so it can again hide the contact detail/number.