Реагировать - показывать оповещения каждый раз, когда я нажимаю на изображение

Проблема заключается в том, что этот код переключает alertVisible в обратное к его предыдущему состоянию:

  changeAlertVisibility = () => {
    this.setState(prevState => ({
      alertVisible: !prevState.alertVisible
    }));
  };

Итак, изначально this.state.alertVisible равно false. После первого щелчка будет установлено значение !this.state.alertVisible // => true. При втором щелчке вы устанавливаете его обратно на !this.state.alertVisible // => false.

Для того, чтобы достичь того, что вы хотите, вы должны ВСЕГДА установить alertVisible в true следующим образом:

  changeAlertVisibility = () => {
    this.setState({ alertVisible: true });
  };

Теперь, возможно, вы захотите установить его обратно в false, когда пользователь закрывается оповещение Я не могу точно сказать вам, как этого добиться, поскольку не вижу определения вашего компонента Alert. Тем не менее, я бы добавил onClose обратный вызов к вашему Alert, который вызывается при закрытии оповещения, а затем установил для alertVisible значение false:

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;