Hide,Show and Toggle In ReactJs

04-Apr-2023

.

Admin

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...

#React.js