React.js - Both images disappear onClick - how do I make only 1 disappear at
I'm trying to make an image disappear on React.js but if there are 2 images and one is clicked, they both disappear. I just need one to disappear at a time when they are clicked. I'm adding a class that will 'display:none' when clicked on.
class Home extends Component {
constructor(props) {
super(props);
this.state = {addClass: false}
}
handleClick() {
this.setState({addClass: !this.state.addClass});
}
render () {
let clickedClass = ["beer"];
if(this.state.addClass) {
clickedClass.push('gone');
}
return (
<div>
<img id="beer1" className={clickedClass.join(' ')} src={('/images/beer1.png')} onClick={(e) => this.handleClick(e)}/>
<img id="beer2" className={clickedClass.join(' ')} src={('/images/beer2.png')} onClick={(e) => this.handleClick(e)}/>
</div>
)
}
}
class Home extends Component {
constructor(props) {
super(props);
this.state = {addClass: false}
}
handleClick() {
this.setState({addClass: !this.state.addClass});
}
render () {
let clickedClass = ["beer"];
if(this.state.addClass) {
clickedClass.push('gone');
}
return (
<div>
<img id="beer1" className={clickedClass.join(' ')} src={('/images/beer1.png')} onClick={(e) => this.handleClick(e)}/>
<img id="beer2" className={clickedClass.join(' ')} src={('/images/beer2.png')} onClick={(e) => this.handleClick(e)}/>
</div>
)
}
}
Комментарии
Отправить комментарий