How to Hide and Show Div in React JS

Hi Guys,

In this Blog, I will learn you how to hide and show div on click button in ReactJs.This example is focused on reactjs show hide div on click. we will help you to give example of how to hide and show div in react i would like to show you react hide and show div.

I explained simply about reactjs hide show div Follow bellow tutorial step of hide and show div on button click in react js.

Hide, Show Div Example with onClick Button

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component{
  constructor(){
      super();
      this.state={
          show:true
      }
  }
  render(){
    return (
      <div className="App">
        <header className="App-header">
          <div>
              {
                  this.state.show? <div><h1>Hide and Show</h1></div> : null
              }
              <button onClick={()=>{this.setState({show:!this.state.show})}}>{ this.state.show? 'Hide' : 'Show'} Div</button>
          </div>
        </header>
      </div>
    );
  }
}

export default App;

It will help you...