by Sai gowtham

How to show or hide elements and Components in React

In this tutorial, 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.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course