How to Hide Show Div in React JS

Hide show div component in react js example tutorial; i am going to show you easy way to how to build hide show div component in react js app.

Sometimes, you need to hide or show div components into your react app; so in this tutorial, i will provide you simple exmaple of hide show div components in react js apps.

React JS Show Hide Div Component Tutorial

• Step 1 – Create React App
• Step 2 – Install Bootstrap 4
• Step 3 – Create Hide Show Div Component
• Step 4 – Import Component in App.js

Step 1 – Create React App

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 – Install Bootstrap 4

Execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save

Import 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

Create hide show div component; so go to 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 Hideshow.js file and add following code into 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

Step 4 – Import Component in App.js

Import 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 Tutorials