onClick like button likes all objects in array React JS

I’m super new to web development but I’m trying to implement a like button to an API array of the mars rover images in react js. The problem I’m having is when I click the like button for one of my images all of the like buttons click. I’ve tried using id’s, classNames, and keys for my button but nothing seems to be working. Any help would be appreciated 🙂

class Rover extends React.Component {
  state = {
      loading: true,
      images: [],
  };

  async componentDidMount() {
      const url = 'https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&page=2&api_key='
      const response = await fetch(url);
      const data= await response.json();
      this.setState({ images: data.photos, loading: false });
      console.log(this.state);
  }

  render() {
      if (this.state.loading) {
          return <div>loading...</div>;
      }
      if (!this.state.images) {
          return <div>didn't find image</div>
      }

        return (
          <IconContext.Provider value={{ color: '#a9b3c1', size: 64 }}>
            <RoverSection>
              <RoverWrapper>
                <RoverHeading>Mars Rover</RoverHeading>
                <div>
                    {this.state.images.map((image, idx) => (
                    <div className={`some-image-${idx}`} key={`some-image${idx}`}>
                      <RoverContainer>
                          <RoverCard to='/'>
                            <RoverCardInfo>
                              <RoverCardID>Photo ID: {image.id}</RoverCardID>
                              <RoverCardFeatures>
                                <Img src={image.img_src} />
                                <RoverCardFeature>{image.rover.name} Rover</RoverCardFeature>
                                <RoverCardFeature>{image.camera.full_name}</RoverCardFeature>
                                <RoverCardFeature>{image.earth_date}</RoverCardFeature>
                              </RoverCardFeatures>
                              <Button primary id={image.id} className={`some-button-${idx}`} onClick={() => {
                                this.setState({
                                  isLiked: !this.state.isLiked
                                })
                              }}>{this.state.isLiked ? <FaHeart/> : <FaRegHeart/>}</Button>
                            </RoverCardInfo>
                          </RoverCard>
                        </RoverContainer>
                      </div>
                    ))}
                   </div>
                </RoverWrapper>
              </RoverSection>
            </IconContext.Provider>
        );
      }
    }

export default Rover

>Solution :

You are mapping through all of the images (you have an array of images); However, you do not have an array for your likes you just have a single boolean value. You need to create an array for your likes of equal size to your image array and then use the same index (you can get the current index in your map (you already did an named it idx))

Your initial like state should be similar to:

 async componentDidMount() {
      const url = 'https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&page=2&api_key='
      const response = await fetch(url);
      const data= await response.json();
      this.setState({ images: data.photos, isLiked:new Array(data.photos.length).fill(false), loading: false });
      console.log(this.state);
  }

and then in you component

this.setState((current)=>{
  const newState={...current};
  const isLiked = newState.isLiked;
  isLiked[idx] = !isLiked[idx];
  return {
    ...newState,
    isLiked:[...isLiked]
  }
})

and

{this.state.isLiked[idx] ? <FaHeart/> : <FaRegHeart/>}