React 17 Hide Show Toggle Tutorial

React Hide show toggle example; In this tutorial, i will show you step by step on how to implement hide show toggle component in react js app.

It is very easy to hide, show and toggle elements in any programming language. This is because there are many libraries available for free to host these events. Using which you can easily show, hide and toggle elements. Also many programs can be done on it.

If you want to hide, show and toggle any div element or any other html element in any React application. Or want to implement a button on which the visitor clicks and div element or any other html element performs hide, show and toggle events. So, You can easily implement this react hide show toggle div element or any other html element example.

To Show Hide and Toggle in React JS Apps

Step 1 – Create React App
Step 2 – Install Bootstrap 4
Step 3 – Create Hide Show Toggle Component
Step 4 – Import Hide Show Toggle 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 react-axios-tutorial

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

Eecute the following command on terminal 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 toggle in react js</h2>
    </div>
  );
}
export default App;

Step 3 – Create Hide Show Toggle Component

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 – Import Hide Show ToggleComponent in App.js

Import hide show toggle component in App.js file, So visit directory src and open App.jsfile. Then add following code into it:

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

React 17 hide show toggle example; you have learned how to show and hide content of a child component in a parent component.