How To Show And Hide Components In React

Introduction

 

In this article, we will learn how to hide or show components in a React applications. ReactJS is an open-source JavaScript library which is used for creating user interfaces. It is developed and maintained by Facebook. Learn more about React.

 

Prerequisites

• We should have the basic knowledge of React.js
• Visual Studio Code IDE should be installed on your system.
• Bootstrap

Create React.js Project

To create a new React.js project, open the command prompt and enter the following command.

npx create-react-app reduxapp

Open the newly created project in Visual Studio Code and install Bootstrap in this project by using the following command.

npm install --save bootstrap

Now, open the index.js file and add import Bootstrap. 

import 'bootstrap/dist/css/bootstrap.min.css';

Now go to the src folder and create two new components, named

• Toggle.js
• Child.js 

Now open Toggle.js file add the following code in this component. 

import React, { Component } from 'react'
export class Toggle extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
        };
        this.togglebutton = this.togglebutton.bind(this);
    }
    togglebutton() {
        const { open } = this.state;
        this.setState({
            open: !open,
        });
    }
    render() {
        var { title, children } = this.props;
        const { open } = this.state;
        if (open) {
            title = 'Hide Component';
        } else {
            title = 'Show Component';
        }
        return (
            <div className="container">
                <div class="row" className="hdr">
                    <div class="col-sm-12 btn btn-info">
                        Show Hide component on Click in React JS App
                         </div>
                </div>
                <div style={{ "marginTop": "10px" }}>
                    <div class="col-sm-8 btn btn-success" onClick={this.togglebutton}>
                        {title}
                    </div>
                    {open && (
                        <div>
                            {children}
                        </div>
                    )}
                </div>
            </div>
        );
    }
}
export default Toggle

Now open Child.js file and add the following code.

import React, { Component } from "react";

class Child extends Component {
    render() {
        return (
            <div>Child Component </div>
        );
    }
}

export default Child;

 Add a reference of this component in app.js file,

import React from 'react';
import './App.css';
import Toggle from "./Toggle";
import Child from "./Child";
function App() {
  return (
    <div className="App">
      <Toggle title="Show Child">
                <Child />
            </Toggle>

    </div>
  );
}

export default App;

 Now run the project by using 'npm start' and check the result.

 

Now click on the show component button. 

 

Now go to src folder and create two different components named Comp1.js, Comp.js, and Hideshow.js,and add the following code,

• Comp1.js
• Comp2.js 
• Hideshow.js 

Now open Comp1.js file and add following code.

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. 

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 the following code

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

Add reference of this component in app.js file,

import React from 'react';
import './App.css';
import Hideshow from './Hideshow'

function App() {

  return (
    <div className="App">
      <Hideshow/>
    </div>
  );
}

export default App;

Now run the project by using 'npm start' and check the result.

 

Summary

 

In this article, we learned how to show and hide content of a child component in a parent component.