How to show or hide elements and Components in React
In this post we will give you information about How to show or hide elements and Components in React. Hear we will give you detail about How to show or hide elements and Components in ReactAnd how to use it also give you demo for it if it is necessary.
we are going to learn about different ways to show or hide elements and components in react.
Consider we have this component with two buttons show or hide.
import React,{Component} from 'react'class App extends Component{ render(){ return( <div> <h1>Hello React</h1> <button>Show</button> <button>Hide</button> </div> ) }}export default App;Now we need to hide or show the h1 element by click those two buttons.
Let’s add a state and event handler functions to our component.
import React,{Component} from 'react'class App extends Component{ state = { isActive:false } handleShow = ()=>{ this.setState({ isActive: true }) } handleHide = () =>{ this.setState({ isActive: false }) } render(){ return( <div> {this.state.isActive ? <h1>Hello React</h1> : null } <button onClick={this.handleShow}>Show</button> <button onClick={this.handleHide}>Hide</button> </div> ) }}export default App;In the above code, we have used the ternary operator {condition? true: false } to show or hide our h1 element, it means we are showing h1 element if isActive property is true otherwise we are showing null(nothing).
Using Logical && Operator
We can also use logical && operator to show or hide elements.
<div> {this.state.isActive && <h1>Hello React</h1>} <button onClick={this.handleShow}>Show</button> <button onClick={this.handleHide}>Hide</button></div>If isActive property is true the h1 element is rendered on the screen. if the property is false h1 is not rendered on the screen.
Using if/else statement
In the below example, we are using JavaScript if/else statement to show or hide elements.
import React, { Component } from "react";class App extends Component { state = { isActive: false }; handleShow = () => { this.setState({ isActive: true }); }; handleHide = () => { this.setState({ isActive: false }); }; render() { if (this.state.isActive) { return ( <div> <h1>Hello react</h1> <button onClick={this.handleHide}>Hide</button> </div> ); } else { return ( <div> <button onClick={this.handleShow}>Show</button> </div> ); } }}export default App;Here we are rendering the elements inside if block, if isActive property is true otherwise we are rendering the elements insideelse block.
Show or hide components
Similarly, we can use the same conditional operators to show or hide components.
Let’s see an example.
import React, { Component } from "react";class App extends Component { state = { isActive: false }; handleShow = () => { this.setState({isActive: true}); }; handleHide = () => { this.setState({isActive: false}); }; render() { return ( <div> {this.state.isActive && <h1>Hello react</h1>} {this.state.isActive ?( <HideButton onClick={this.handleHide}/> ) : ( <ShowButton onClick={this.handleShow}/> )} </div> ) }}export default App;In this example, we are rendering <HideButton> component if isActive property is true.If the property is false we are rendering <ShowButton> component.
Hope this code and post will helped you for implement How to show or hide elements and Components in React. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs