How to show or hide element in React ?

Last Updated : 23 Dec, 2020

ReactJS is an entire architecture based on components that are used to create awesome UI and developer components. In any React app, it is all about components, so usually, we have to work with new components to develop a rich user interface. Hence, as per different circumstances we have to hide or show some components if we need them somewhere.

To implement such functionality of showing and hiding components we should have some id, some key values, by using those values we can modify the visibility of the components in our UI using different operators that work on certain conditions.

Creating React Application:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```
Step 2:After creating your project folder i.e. foldername, move to it using the following command:
```
cd foldername
```

Hide or Show Component in ReactJS As we discussed above we have to create few components and render them into a single parent file to execute the conditions so that we can apply the functionality of showing or hiding to some particular components. Let’s create three child components and name them Child1.js, Child2.js, and Child3.js in the src folder and paste the following code into respective files.

Child1.js:

Javascript

import React, { Component } from "react"; 
  
class Child1 extends Component { 
  constructor() { 
    super(); 
    this.state = { 
      name: "React"
    }; 
  } 
  
  render() { 
    return <div>This is how GFG child component  
                number 1 looks like.</div>; 
  } 
} 
  
export default Child1;

Child2.js:

Javascript

import React, { Component } from "react"; 
  
class Child2 extends Component { 
  constructor() { 
    super(); 
    this.state = { 
      name: "React"
    }; 
  } 
  
  render() { 
    return <div>This is how GFG child component  
                number 2 looks like.</div>; 
  } 
} 
  
export default Child2;

Child3.js:

Javascript

import React, { Component } from "react"; 
  
class Child3 extends Component { 
  constructor() { 
    super(); 
    this.state = { 
      name: "React"
    }; 
  } 
  
  render() { 
    return <div>This is how GFG child component  
                number 3 looks like.</div>; 
  } 
} 
  
export default Child3;

Now it’s time to merge all these child JS files into the main parent file where we can set some particular conditions to show or hide some particular components. So let’s create the main file name App.js and paste the following code into it.

Now define three different boolean variables into the App.js file.

constructor() {
  super();
  this.state = {
    name: "React",
    shchild1: false,
    shchild2: false,
    shchild3: false
  };
}

Initially, we allocate the default value into all the three boolean variables as false, and further, we will use these variables to show to hide any particular component in the App.js file.

App.js:

Javascript

import React, { Component } from "react"; 
import { render } from "react-dom"; 
import Child1 from "./Child1"; 
import Child2 from "./Child2"; 
import Child3 from "./Child3"; 
  
class App extends Component { 
  constructor() { 
    super(); 
    this.state = { 
      name: "React", 
      shchild1: false, 
      shchild2: false, 
      shchild3: false
    }; 
    this.hideComponent = this.hideComponent.bind(this); 
  } 
  
  hideComponent(varname) { 
    console.log(varname); 
    switch (varname) { 
      case "shchild1": 
        this.setState({ shchild1: !this.state.shchild1 }); 
        break; 
      case "shchild2": 
        this.setState({ shchild2: !this.state.shchild2 }); 
        break; 
      case "shchild3": 
        this.setState({ shchild3: !this.state.shchild3 }); 
        break; 
      default: return; 
    } 
  } 
  
  render() { 
    const { shchild1, shchild2, shchild3 } = this.state; 
    return ( 
      <div> 
        {shchild1 && <Child1 />} 
        <hr /> 
        {shchild2 && <Child2 />} 
        <hr /> 
        {shchild3 && <Child3 />} 
        <hr /> 
        <div> 
          <button onClick={() => this.hideComponent("shchild1")}> 
            Click here to hide GFG child1 component 
          </button> 
          <button onClick={() => this.hideComponent("shchild2")}> 
            Click here to hide GFG child2 component 
          </button> 
          <button onClick={() => this.hideComponent("shchild3")}> 
            Click here to hide GFG child3 component 
          </button> 
        </div> 
      </div> 
    ); 
  } 
} 
  
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: As we have declared three boolean variables in starting and set the default value to be false, and we have also made three child component which is further rendered in the main file as we need to hide or show the components. If we set the boolean value to be true then only that particular component will be rendered otherwise by default it will not render hence will be in a hidden phase. By clicking on different buttons created we can switch the cases to change the values of boolean variables.

When we click the click event button it simply updates the value of variables by sending the string as an input for which case that button has been clicked and based on the value updated in the variables it will decide that whether that component has to be shown or hidden. Using a similar method we can also hide or show elements also in ReactJS.