The element is displayed or hidden through the true or false control element of className.
App.js
import React, {Component} from ‘react’;
import ‘./App.css‘
class App extends Component {
constructor(props) {
super(props);
this.state = {
show:true,
text:‘Hide’
}
}
render() {
return (
this.state.show?‘show’:‘hide‘}>Text
);
}
toggle =()=>{
var show = this.state.show;
var text = this.state.text;
if(show){
show =false
text = ‘display’
}else{
show = true
text = ‘Hide’
}
this.setState({
show:show,
text:text
})
}
}
export default App;
App.css< /p>
.show{
opacity: 1;
transition: .5s all ease-in;
}
.hide{
opacity: 0;
transition: .5s all ease-in;
}
import React, {Component} from ‘react’;
import ‘./App.css‘
class App extends Component {
constructor(props) {
super(props);
this.state = {
show:true,
text:‘Hide’
}
}
render() {
return (
this.state.show?‘show’:‘hide‘}>Text
);
}
toggle =()=>{
var show = this.state.show;
var text = this.state.text;
if(show){
show =false
text = ‘display’
}else{
show = true
text = ‘Hide’
}
this.setState({
show:show,
text:text
})
}
}
export default App;
.show{
opacity: 1;
transition: .5s all ease-in;
}
.hide{
opacity: 0;
transition: .5s all ease-in;
}