How to show or hide element in React ? - GeeksforGeeks

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 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
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:JavascriptJavascriptimport 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;
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:JavascriptJavascriptimport 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;
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:JavascriptJavascriptimport 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;
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:JavascriptJavascriptimport 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;
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.
Following will be the output if the user does not click on any button:
Following will be the output if the user does not click on any button:
Following will be the output if the user clicks on all button:
Following will be the output if the user clicks on all button:
Picked
react-js
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
How to filter object array based on attributes?
How to remove duplicate elements from JavaScript Array ?
How to get selected value in dropdown list using JavaScript ?
Angular File Upload
Lodash _.debounce() Method