React Js Tutorial- How To Make Hide Show Toggle In React Js App

Learn To Make Hide Show Toggle In React Js App

In this React guide, we will learn how to make a hide show toggle in a React Js app. Sometimes, it happens that we want to hide show toggle components in a React app. So, this React tutorial will tell us how to hide show and toggle components in a React app step by step.

We will be creating comp1, comp2, and hide show components after which, we include them in the app.js file of our React app.

 

How To Hide Show Toggle In A React Js App

Step 1- Create React App

Step 2- Set Up Bootstrap 4

Step 3- Create Hide Show Toggle Component

Step 4- Add Component In App.js

 

Step 1- Create React App

In this step, we will install a new React app. If you are already done with it, then jump on to the next step:

npx create-react-app react-axios-tutorial

 

Now, to run the React app, we will have to execute the following command on our terminal:

npm start

 

Step 2- Set Up Bootstrap 4

Further, we will be setting up the bootstrap 4 library by executing the following command:

npm install bootstrap --save

 

Here, we have to add the bootstrap.min.css file in the src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <h2>hide show toggle in react js</h2>
    </div>
  );
}
 
export default App;

 

Step 3- Create Hide Show Toggle Component

Afterward, we need to visit src directory of our React app and create the components named Comp1.js, Comp2.js and Hideshow.js:

Further, we will open the Comp1.js file and add the below 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;

 

Next, we need to open the Comp2.js file where we add the given code:

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;

 

Next is required to open the Hideshow.js file and add the following code into it:

import React, { Component } from 'react' 
import Comp1 from "./Comp1";  
import Comp2 from "./Comp2";  
export class Hideshow 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 Hideshow

 

Step 4- Add Component In App.js

In the last step, we need to add the Toggle.js file in the src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Hideshow from './Hideshow'
 
function App() {  
     
  return (  
    <div className="App">  
      <Hideshow/>  
    </div>  
  );  
}  
 
export default App;

 

Summary

So, in this React guide, we have seen how to Show and Hide the content of a child component in a parent component.

 

Thanks