React - Show Alert each time I click on an image - reactjs

Question

Each time I click on an image, the changeAlertVisibility get called.
It then changes the alertVisible property of the state to true.
Then inside of the render method, if alertVisible value is true, an Alert (dialog box) should get rendered, otherwise nothing.
import React, { Component } from "react";
import Alert from "./Alert";
class ListItem extends Component {
state = {
alertVisible: false
};
changeAlertVisibility = () => {
this.setState(prevState => ({
alertVisible: !prevState.alertVisible
}));
};
render() {
return (
<div className="card__body">
<img
src={this.props.photo.urls.small}
onClick={() => this.changeAlertVisibility()}
/>
{this.state.alertVisible ? (
<Alert
photoDesc={this.props.photo.description}
photoPath={this.props.photo.urls.small}
photoAlt={this.props.photo.id}
/>
) : (
<></>
)}
</div>
);
}
}
export default ListItem;
It works, but only by every second click.
The first time, I click an image, the value of alertVisible changes to true and the Alert pops up.
But the second time, the value of alertVisible changes to false and no Alert pops up.
The third time it works again and so on.
How can I change the code that the Alert pops up on each click?

Answer 1

The problem is that this code is toggling alertVisible to the inverse of its previous state:
changeAlertVisibility = () => {
this.setState(prevState => ({
alertVisible: !prevState.alertVisible
}));
};
So, initially this.state.alertVisible is false. After the first click, it will be set to !this.state.alertVisible // => true. On the second click, you are setting it back to !this.state.alertVisible // => false.
In order to achieve what you want, you need to ALWAYS set alertVisible to true like this:
changeAlertVisibility = () => {
this.setState({ alertVisible: true });
};
Now, you probably want to set it back to false when the user closes the alert. I can't tell you exactly how to achieve that since I can't see the definition of your Alert component. However, I would add a onClose callback to your Alert that gets called when the alert is closed and then set alertVisible to false there:
import React, { Component } from "react";
import Alert from "./Alert";
class ListItem extends Component {
state = {
alertVisible: false
};
changeAlertVisibility = (visible) => {
this.setState({ alertVisible: visible });
};
render() {
return (
<div className="card__body">
<img
src={this.props.photo.urls.small}
onClick={() => this.changeAlertVisibility(true)}
/>
{this.state.alertVisible ? (
<Alert
photoDesc={this.props.photo.description}
photoPath={this.props.photo.urls.small}
photoAlt={this.props.photo.id}
onClose={() => this.changeAlertVisibility(false)}
/>
) : (
null
)}
</div>
);
}
}
export default ListItem;