I have an array of objects named 'rounds' which I am mapping through in React. I am rendering an image in a gallery for each object/index in the array. I want to have the option to assign each image rendered, with it's original object key/value pairs. So, if I select the first image from the gallery, the object key/values are set as those of the index[0] of the array. Selecting the second image will set the key/values of the object to those of index[1] of the array and so on. I have considered setting these values as a single object stored in sessionStorage, so that the image selected (and its key/values) can be further processed within another react component namely 'ReviewSingleRound'.

What I have tried so far, I have wrapped the image in a in an attempt to only set the values associated with the selected image with the onClick event however, I can see that the session storage value is set on rendering the gallery. It is not setting with the onClick event. Another problem with this is that each image, has the same item values as each other, that is the last object in the original object array.

Is there a better way to render the gallery and then have it that the images are attributed with only the key/values of the correspinding object from the rounds array?

Here is the return and map section of my code:

return(
    <div>
    <h3 className='heading'> Review Rounds</h3>
    <Container className='gallery' >
      <div className='row gallery-row'>
        {
          rounds.map((roundsItem,index)=>{
            return(
              <div key={index} className='col-6 col-md-4'>
               <button onClick={sessionStorage.setItem("image", JSON.stringify(rounds[index]))}><a href="/ReviewSingleRound"> <img src={image} 
                />
                <br />Title
                </a>
               </button>
              </div>
            )
          })
        }
      </div>
    </Container>
    </div>
  )