Hide,Show and Toggle In ReactJs

React.js

Nicesnippets

1734

21-01-2020


Hi Friends,

Hello guys how to do hide and show in reactjs. and toggle example with state. you can hide and show div,button,span,p,textbox,textare,radio button,checkbox and select box 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;

I hope it can help you...


Recommended Posts