Hide,Show and Toggle In ReactJs

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Hello guys today now in this blog i will show you how to do hide and show in reactjs. Here i will also show with you toggle example with state. We can easily hide and show div,button,span,p,textbox,textare,radio button,checkbox and select box also with ternary condition.

Hide,Show and Toggle Example With Onclick Button

/src/App.js file

import React from 'react'

class App extends React.Component{

    constructor(){
        super();
        this.state = {
            toggle:true
        }
    }

    render(){
        return(
            <div>
                {
                  this.state.toggle ? <div>Hide and Show Me</div> : null
                }
                <button onClick={()=>{this.setState({toggle:!this.state.toggle})}} class="btn btn-primary">Toggle Me</button>
            </div>
        );
    }
}

export default App;

Read Also : How To Create Class Component In React JS

I hope it will help you. Also you can follow us onĀ Facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →