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.
  1. 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.
  1. npm install --save bootstrap   
Now, open the index.js file and add import Bootstrap. 
  1. 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. 
  1. import React, { Component } from 'react'  
  2. export class Toggle extends Component {  
  3.     constructor(props) {  
  4.         super(props);  
  5.         this.state = {  
  6.             open: false,  
  7.         };  
  8.         this.togglebutton = this.togglebutton.bind(this);  
  9.     }  
  10.     togglebutton() {  
  11.         const { open } = this.state;  
  12.         this.setState({  
  13.             open: !open,  
  14.         });  
  15.     }  
  16.     render() {  
  17.         var { title, children } = this.props;  
  18.         const { open } = this.state;  
  19.         if (open) {  
  20.             title = 'Hide Component';  
  21.         } else {  
  22.             title = 'Show Component';  
  23.         }  
  24.         return (  
  25.             <div className="container">  
  26.                 <div class="row" className="hdr">  
  27.                     <div class="col-sm-12 btn btn-info">  
  28.                         Show Hide component on Click in React JS App  
  29.                          </div>  
  30.                 </div>  
  31.                 <div style={{ "marginTop""10px" }}>  
  32.                     <div class="col-sm-8 btn btn-success" onClick={this.togglebutton}>  
  33.                         {title}  
  34.                     </div>  
  35.                     {open && (  
  36.                         <div>  
  37.                             {children}  
  38.                         </div>  
  39.                     )}  
  40.                 </div>  
  41.             </div>  
  42.         );  
  43.     }  
  44. }  
  45. export default Toggle  
Now open Child.js file and add the following code.
  1. import React, { Component } from "react";  
  2.   
  3. class Child extends Component {    
  4.     render() {  
  5.         return (  
  6.             <div>Child Component </div>  
  7.         );  
  8.     }  
  9. }  
  10.   
  11. export default Child;  
 Add a reference of this component in app.js file,
  1. import React from 'react';  
  2. import './App.css';  
  3. import Toggle from "./Toggle";  
  4. import Child from "./Child";  
  5. function App() {  
  6.   return (  
  7.     <div className="App">  
  8.       <Toggle title="Show Child">  
  9.                 <Child />  
  10.             </Toggle>  
  11.      
  12.     </div>  
  13.   );  
  14. }  
  15.   
  16. 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.
  1. import React, { Component } from "react";  
  2. class Comp1 extends Component {  
  3.   constructor() {  
  4.     super();  
  5.     this.state = {  
  6.       name: "ReactJS"  
  7.     };  
  8.   }  
  9.   
  10.   render() {  
  11.     return <div>This is component1</div>;  
  12.   }  
  13. }  
  14.   
  15. export default Comp1;  
Now open Comp2.js file and add following code. 
  1. import React, { Component } from "react";  
  2.   
  3. class Comp2 extends Component {  
  4.   constructor() {  
  5.     super();  
  6.     this.state = {  
  7.       name: "ReactJS"  
  8.     };  
  9.   }  
  10.   
  11.   render() {  
  12.     return <div>This is component2</div>;  
  13.   }  
  14. }  
  15.   
  16. export default Comp2;  
Now open Hideshow.js file and add the following code
  1. import React, { Component } from 'react'  
  2. import Comp1 from "./Comp1";  
  3. import Comp2 from "./Comp2";  
  4. export class Hideshow extends Component {  
  5.     constructor() {  
  6.         super();  
  7.         this.state = {  
  8.             name: "ReactJS",  
  9.             showHideComp1: false,  
  10.             showHideComp2: false,  
  11.         };  
  12.         this.hideComponent = this.hideComponent.bind(this);  
  13.     }  
  14.     hideComponent(name) {  
  15.         console.log(name);  
  16.         switch (name) {  
  17.             case "showHideComp1":  
  18.                 this.setState({ showHideComp1: !this.state.showHideComp1 });  
  19.                 break;  
  20.             case "showHideComp2":  
  21.                 this.setState({ showHideComp2: !this.state.showHideComp2 });  
  22.                 break;  
  23.             default:  
  24.                 null;  
  25.         }  
  26.     }  
  27.     render() {  
  28.         const { showHideComp1, showHideComp2 } = this.state;  
  29.         return (  
  30.             <div>  
  31.                     <div class="col-sm-12 btn btn-info">  
  32.                         Show Hide component on Click in React JS App  
  33.                          </div>  
  34.                 {showHideComp1 && <Comp1 />}  
  35.                 <hr />  
  36.                 {showHideComp2 && <Comp2 />}  
  37.                 <hr />  
  38.                 <div>  
  39.                     <button className="btn btn-info" onClick={() => this.hideComponent("showHideComp1")}>  
  40.                         Click to hide Demo1 component  
  41.               </button>  
  42.                     <button className="btn btn-info" onClick={() => this.hideComponent("showHideComp2")}>  
  43.                         Click to hide Demo2 component  
  44.               </button>  
  45.                 </div>  
  46.             </div>  
  47.         );  
  48.     }  
  49. }  
  50.   
  51.   
  52. export default Hideshow  
Add reference of this component in app.js file,
  1. import React from 'react';  
  2. import './App.css';  
  3. import Hideshow from './Hideshow'  
  4.   
  5. function App() {  
  6.     
  7.   return (  
  8.     <div className="App">  
  9.       <Hideshow/>  
  10.     </div>  
  11.   );  
  12. }  
  13.   
  14. 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.


Similar Articles