1

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:

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.

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

1 respuesta 1

2
  1. Si, esto ocurre porque cuando llamas la función asignas el estado de react con la imagen de elemento en que hiciste click, por lo tanto React re-renderiza tu componente y los actualiza todos con la misma imagen.
  2. Si ya tienes tus datos que tienen el URL no necesitas meterte con el estado de tu componente. Cuando haces el map ya tienes acceso a las URLs directamente, puedes simplemente hacer mención de ellas, no sé exactamente que aplicación tiene tu elemento, pero mi recomendación sería que manejes los datos como el estado (por si en alguna parte de tu código decides cambiar la lista de manera dinámica) y que hagas el render con estos datos directamente.
  3. Para algo que si te sirve usar el state es para que react sepa cuál imagen debe de mostrar cuando le das click, puedes guardar esto cómo un estado.

Te ofrezco esta solución en donde se manejan los datos como una constante, tal y como lo tienes el tuyo:

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)
        this.state = new Array(wachedData.length).fill(false); // Aquí guardamos cual queremos ver
      }

    state= {image: ''}

    gimmeImage (id) {
        let actual = this.state;
        actual[id] = !actual[id];
        this.setState(actual);
        
    }

    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.id)}> {wachedElement.id} - {wachedElement.personaje} - {wachedElement.anime}</h3> 
                {this.state[wachedElement.id] && (<img src={wachedElement.image} alt="character" style={{maxHeight: '25vh'}}></img>) }
                <hr/>
            </div>
            ))
        )
    }
}

render(<ClickOnLink/>, document.getElementById('root'))

¿Qué se cambió?

  1. Inicializamos un estado que nos indique si la imagen se debe de renderizar o no, el estado consiste en un array del tamaño de los datos de variables booleanas, se inicializan en false porque ninguna imagen se debe de mostrar por defecto.
  2. Hacemos que la función que se activa al hacer click cambie este estado, unicamente para el elemento al cual se está haciendo click, por medio del id.
  3. Renderizamos el objeto a través de los datos usando map y para poder decidir si vamos a renderizar la imagen utilizamos el operador de and (&&), por lo tanto si cambia el estado por medio de la función gimmeImage se va a renderizartodo tu componente, revisando si necesita o no la imagen.
1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.