如何从对象数组中获取精确的 id？

Question

Making an application (react + redux). It contains a few photos. When you click a photo you get a modal window with bigger photo and comments.

App component is:

class App extends Component {
  componentDidMount() {
    const { getPhotos } = this.props
    getPhotos()
  }

  getPhoto = (id) => {
    const { openModal } = this.props
    openModal(id)
  }

  render() {
    const { photos, isOpen, isFetching } = this.props
    return (
      <div className="container">
        <Header />
        <div className="list__content">
          {isFetching ? (
            <p>Loading...</p>
          ) : (
            photos.map((photo) => (
              <List
                key={photo.id}
                src={photo.url}
                id={photo.id}
                onClick={this.getPhoto}
              />
            ))
          )}
        </div>
        <Footer />
        {isOpen && <ModalContainer />}
      </div>
    )
  }
}

export default connect(
  ({ photos, modal }) => ({
    photos: photos.photos,
    isFetching: photos.isFetching,
    isOpen: modal.isOpen,
  }),
  { getPhotos, openModal }
)(App)

List component:

const List = ({ src, onClick }) => {
  return (
    <div className="list__item">
      <img src={src} alt={src} onClick={onClick} />
    </div>
  )
}

export default List

You can see the prop onClick={this.getPhoto} in the List component. If I change it like this onClick={this.getPhoto(photo.id)} it won't work correctly because it gets id's of all photos and shows them all (one by one) in my modal window.

So, how to get a precise id of the photo in that case with my method getPhoto ?

Answer 1

set onClick to function that call getPhoto

photos.map((photo) => (
  <List
    key={photo.id}
    src={photo.url}
    id={photo.id}
    onClick={() => this.getPhoto(photo.id)}
  />
))