Button Onclick Show Click Again Remove Component React

• 
• Updated date Sep 29, 2020

• 60.4k
• 3

In this article, y'all will acquire how to show and hibernate component in react application.

Introduction

In this commodity, nosotros will learn how to hide or prove components in a React applications. ReactJS is an open-source JavaScript library which is used for creating user interfaces. Information technology is developed and maintained by Facebook. Learn more than almost React.

Prerequisites

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

Create React.js Projection

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

1. npx create-react-app reduxapp

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

1. npm install --salve bootstrap

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

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

At present get to the src folder and create two new components, named

• Toggle.js
• Kid.js

At present open Toggle.js file add the post-obit code in this component.

1. import React, { Component } from 'react'
2. consignclass  Toggle extends Component {
3.     constructor(props) {
4.         super(props);
5. this .state = {
6.             open up:faux ,
7.         };
8. this .togglebutton = this .togglebutton.bind( this );
9.     }
10.     togglebutton() {
11. const  { open } = this .country;
12. this .setState({
13.             open: !open up,
14.         });
15.     }
16.     render() {
17.         var { title, children } =this .props;
18. const  { open } = this .state;
19. if  (open) {
20.             title ='Hibernate Component' ;
21.         }else  {
22.             title ='Show Component' ;
23.         }
24. return  (
25.             <div className="container" >
26.                 <divclass = "row"  className= "hdr" >
27.                     <divgrade = "col-sm-12 btn btn-info" >
28.                         Show Hibernate component on Click in React JS App
29.                          </div>
30.                 </div>
31.                 <div style={{"marginTop" : "10px"  }}>
32.                     <divcourse = "col-sm-8 btn btn-success"  onClick={ this .togglebutton}>
33.                         {championship}
34.                     </div>
35.                     {open && (
36.                         <div>
37.                             {children}
38.                         </div>
39.                     )}
40.                 </div>
41.             </div>
42.         );
43.     }
44. }
45. exportdefault  Toggle

At present open Child.js file and add the following code.

1. import React, { Component } from "react" ;
3. class  Child extends Component {
4.     render() {
5. return  (
6.             <div>Kid Component </div>
7.         );
8.     }
9. }
11. consigndefault  Kid;

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 Kid" >
9.                 <Child />
10.             </Toggle>
12.     </div>
13.   );
14. }
16. exportdefault  App;

 Now run the project by using 'npm first' and cheque the issue.

Now click on the bear witness component button.

Now go to src binder and create 2 different components named Comp1.js, Comp.js, and Hideshow.js,and add the post-obit code,

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

Now open up Comp1.js file and add together following code.

1. import React, { Component } from "react" ;
2. class  Comp1 extends Component {
3.   constructor() {
4.     super();
5. this .state = {
6.       proper name:"ReactJS"
7.     };
8.   }
10.   render() {
11. return  <div>This is component1</div>;
12.   }
13. }
15. consigndefault  Comp1;

Now open Comp2.js file and add following code.

1. import React, { Component } from "react" ;
3. class  Comp2 extends Component {
4.   constructor() {
5.     super();
6. this .state = {
7.       name:"ReactJS"
8.     };
9.   }
11.   render() {
12. return  <div>This is component2</div>;
13.   }
14. }
16. consigndefault  Comp2;

Now open Hideshow.js file and add together the post-obit code

1. import React, { Component } from 'react'
2. import Comp1 from"./Comp1" ;
3. import Comp2 from"./Comp2" ;
4. consignclass  Hideshow extends Component {
5.     constructor() {
6.         super();
7. this .country = {
8.             proper noun:"ReactJS" ,
9.             showHideComp1:fake ,
10.             showHideComp2:imitation ,
11.         };
12. this .hideComponent = this .hideComponent.demark( this );
13.     }
14.     hideComponent(name) {
15.         console.log(proper noun);
16. switch  (name) {
17. instance "showHideComp1" :
18. this .setState({ showHideComp1: ! this .state.showHideComp1 });
19. pause ;
20. case "showHideComp2" :
21. this .setState({ showHideComp2: ! this .state.showHideComp2 });
22. break ;
23. default :
24.                 null;
25.         }
26.     }
27.     return() {
28. const  { showHideComp1, showHideComp2 } = this .state;
29. return  (
30.             <div>
31.                     <divclass = "col-sm-12 btn btn-info" >
32.                         Show Hide component on Click in React JS App
33.                          </div>
34.                 {showHideComp1 && <Comp1 />}
35.                 <hour />
36.                 {showHideComp2 && <Comp2 />}
37.                 <hr />
38.                 <div>
39.                     <push 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. }
52. exportdefault  Hideshow

Add reference of this component in app.js file,

1. import React from 'react' ;
2. import'./App.css' ;
3. import Hideshow from'./Hideshow'
5. office App() {
7. return  (
8.     <div className="App" >
9.       <Hideshow/>
10.     </div>
11.   );
12. }
14. exportdefault  App;

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

Summary

In this article, nosotros learned how to testify and hide content of a kid component in a parent component.

bogartthichise.blogspot.com

Source: https://www.c-sharpcorner.com/article/how-to-show-and-hide-component-in-react-application/

Share this post