Como pueden ver tengo un arreglo de objetos con información referente a algunos personajes. Usando la función map recorro el arreglo y muestro en pantalla tanto su id, el personaje y la serie a la que pertenece.
Lo que deseo hacer es que cuando le de click al texto este me muestre debajo de su nombre la imagen asociada a ese personaje y solo en esa ubicación, por decirlo si quien ve el nombre no sabe en específico cual es el personaje pueda dar click y observar su imagen.
El problema que tengo es que cuando doy click en el texto me muestra la imagen que le pido, pero esa misma imagen la pone en todos los elementos, entonces quisiera saber como podría solucionarlo.
Así se observa al cargar:
Como podemos ver esta mostrando la imagen que le pedimos (el nombre donde hicimos click), pero la repite en todos los elementos.
const wachedData = [
{id: 1, personaje: "Rock Lee", anime: "Naruto", image: "http://images6.fanpop.com/image/photos/36400000/Rock-Lee-image-rock-lee-36450126-640-480.jpg"},
{id: 2, personaje: "konan", anime: "Naruto", image: "http://vignette2.wikia.nocookie.net/naruto-bleach/images/a/a3/800px-Konan_Anime_1.jpg/revision/latest?cb=20110207234151"},
{id: 3, personaje: "Midoriya", anime: "Boku no hero", image: "https://1.bp.blogspot.com/-8070srcHS88/WvWzbDyLslI/AAAAAAAAFsk/Lg-yLqEqVXUA85V72UU62bGK2pXpn6KugCLcBGAs/w1200-h630-p-k-no-nu/Izuku+Midoriya+My+Hero+Boku+no+BNHA+MHA+academia+anime+new+episode+manga+deku+all+might+blog+blogspot.png"},
{id: 4, personaje: "Shikamaru", anime: "Naruto", image: "https://img00.deviantart.net/4fff/i/2012/214/a/7/shikamaru_by_kayo1996-d59lwut.png"},
{id: 5, personaje: "kirishima", anime: "Boku no hero", image: "https://s-media-cache-ak0.pinimg.com/736x/61/bf/e4/61bfe457521d734b5872a1fd9810c917.jpg"},
{id:6, personaje: "mina", anime: "boku no hero", image:"https://www.nautiljon.com/images/perso/00/14/ashido_mina_15641.jpg?1524085446"}
]
class ClickOnLink extends React.Component{
constructor(props){
super(props)
}
state= {image: ''}
gimmeImage (urlImage) {
this.setState({image: urlImage})
}
render(){
return(
wachedData.map((wachedElement) => (
<div key={wachedElement.id} style={{backgroundColor: '#c8d6e5', paddingLeft: '0.5rem'}}>
<h3 style={{cursor: 'pointer', color: '#1dd1a1'}} onClick={()=>this.gimmeImage(wachedElement.image)}> {wachedElement.id} - {wachedElement.personaje} - {wachedElement.anime}</h3>
<img src={this.state.image} alt="character" style={{maxHeight: '25vh'}}></img>
<hr/>
</div>
))
)
}
}
ReactDOM.render(<ClickOnLink/>, document.getElementById('root'))