Tengo una serie de objetos llamados 'rondas' que estoy mapeando en React. Estoy representando una imagen en una galería para cada objeto/índice en la matriz. Quiero tener la opción de asignar cada imagen renderizada, con sus pares clave/valor de objeto originales. Entonces, si selecciono la primera imagen de la galería, los valores/clave del objeto se establecen como los del índice [0] de la matriz. Al seleccionar la segunda imagen, se establecerán los valores/clave del objeto en los del índice [1] de la matriz, y así sucesivamente. Consideré establecer estos valores como un solo objeto almacenado en sessionStorage, de modo que la imagen seleccionada (y sus claves/valores) puedan procesarse más dentro de otro componente de reacción, a saber, 'ReviewSingleRound'.

Lo que he intentado hasta ahora, he envuelto la imagen en un intento de establecer solo los valores asociados con la imagen seleccionada con el evento onClick; sin embargo, puedo ver que el valor de almacenamiento de la sesión se establece al renderizar la galería. No se está configurando con el evento onClick. Otro problema con esto es que cada imagen tiene los mismos valores de elemento que las demás, es decir, el último objeto en la matriz de objetos original.

¿Hay una mejor manera de representar la galería y luego hacer que las imágenes se atribuyan solo con los valores/clave del objeto correspondiente de la matriz de rondas?

Aquí está la sección de retorno y mapa de mi código:

 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> )