Home reactjs Hide,Show and Toggle In ReactJs

Hide,Show and Toggle In ReactJs

by Shahriar Sagor
Hide,Show and Toggle In ReactJs

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. From here you will know about Hide,Show and Toggle In ReactJs.

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

close

You may also like