React JS Show & Hide Div Component Example

Hide show div component in react js. In this tutorial, you will learn how to make hide show div component in react js app.

If you want to hide show div components in react js app. So, this example tutorial will guide you step by step on how to hide show div components in react js app.

Note that, in this example will create comp1, comp2, and hideshow components and then include it in app.js file of your react js app.

How to Show/Hide Div component in React JS

Just follow the following steps and make hide show div component in react js app:

• Step 1 – Create React App
• Step 2 – Set up Bootstrap 4
• Step 3 – Create Hide Show Div Component
• Step 4 – Add Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Set up Bootstrap 4

In this step, execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>hide show div component in react js</h2>
    </div>
  );
}

export default App;

Step 3 – Create Hide Show Div Component

In this step, visit src directory of your react js app and create some components named Comp1.js, Comp.js, and Hideshow.js.

Now open Comp1.js file and add following code into it:

import React, { Component } from "react";  
class Comp1 extends Component {  
  constructor() {  
    super();  
    this.state = {  
      name: "ReactJS"  
    };  
  }  
  
  render() {  
    return <div>This is component1</div>;  
  }  
}  
  
export default Comp1;  

Now open Comp2.js file and add following code into it:

import React, { Component } from "react";  
  
class Comp2 extends Component {  
  constructor() {  
    super();  
    this.state = {  
      name: "ReactJS"  
    };  
  }  
  
  render() {  
    return <div>This is component2</div>;  
  }  
}  
  
export default Comp2;  

Now open the Hideshow.js file and add the following code to it:

import React, { Component } from 'react'  
import Comp1 from "./Comp1";  
import Comp2 from "./Comp2";  
export class HideShowDiv extends Component {  
    constructor() {  
        super();  
        this.state = {  
            name: "ReactJS",  
            showHideComp1: false,  
            showHideComp2: false,  
        };  
        this.hideComponent = this.hideComponent.bind(this);  
    }  
    hideComponent(name) {  
        console.log(name);  
        switch (name) {  
            case "showHideComp1":  
                this.setState({ showHideComp1: !this.state.showHideComp1 });  
                break;  
            case "showHideComp2":  
                this.setState({ showHideComp2: !this.state.showHideComp2 });  
                break;  
            default:  
                null;  
        }  
    }  
    render() {  
        const { showHideComp1, showHideComp2 } = this.state;  
        return (  
            <div>  
                    <div class="col-sm-12 btn btn-info">  
                        Show Hide component on Click in React JS App  
                         </div>  
                {showHideComp1 && <Comp1 />}  
                <hr />  
                {showHideComp2 && <Comp2 />}  
                <hr />  
                <div>  
                    <button className="btn btn-info" onClick={() => this.hideComponent("showHideComp1")}>  
                        Click to hide Demo1 component  
              </button>  
                    <button className="btn btn-info" onClick={() => this.hideComponent("showHideComp2")}>  
                        Click to hide Demo2 component  
              </button>  
                </div>  
            </div>  
        );  
    }  
}  
  
  
export default HideShowDiv

This is a JavaScript code that defines a React component called “HideShowDiv”. It imports the React library and the Component class from it. It also imports two other components called “Comp1” and “Comp2” from their respective files.

The constructor function initializes the state of the component with three properties: “name”, “showHideComp1”, and “showHideComp2”. The “showHideComp1” and “showHideComp2” properties are set to “false”, which means that initially, the components “Comp1” and “Comp2” are not displayed.

The “hideComponent” function is called when the buttons are clicked. It toggles the values of the “showHideComp1” and “showHideComp2” properties in the state of the component depending on which button is clicked.

In the render function, the “showHideComp1” and “showHideComp2” properties are destructured from the component’s state. If the “showHideComp1” property is true, the “Comp1” component is displayed. Similarly, if the “showHideComp2” property is true, the “Comp2” component is displayed.

Two buttons are rendered, each with an onClick event listener that calls the “hideComponent” function with the corresponding property name (“showHideComp1” or “showHideComp2”) as an argument.

Finally, the component is exported as the default export and can be used in other files. When the buttons are clicked, the corresponding component is displayed or hidden based on the value of its corresponding state property.

Step 4 – Add Component in App.js

In this step, you need to add HideShowDiv.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import HideShowDiv from './HideShowDiv'

function App() {  
    
  return (  
    <div className="App">  
      <HideShowDiv />  
    </div>  
  );  
}  

export default App;

Conclusion

hide show div component in react js, you have learned how to show and hide div component in react js app.

Recommended React Posts