React Js Hide Show Toggle Example

In this tutorial, you will learn how to implement hide show toggle in react js application using hooks.

How to Show Hide Toggle in ReactJS

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

Step 1 – Create React App

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

npx create-react-app react-axios-tutorial

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

npm start

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

Step 2 – Install and Set up Bootstrap

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

npm install bootstrap --save

Set up 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 toggle in react js</h2>
    </div>
  );
}
export default App;

Step 3 – Create Hide Show Toggle 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 Hideshow.js file and add 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 this step, you need to add Toggle.js file in 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;

Conclusion

hide show toggle in react js, you have learned how to show and hide content of a child component in a parent component.

Recommended React JS Tutorials