Cómo afectar el uso de Gatsby / React Estado del elemento único dentro de la lista

Question

¿Cómo puedo afectar el estado de un elemento dentro de una lista? Actualmente, onClick está aplicando la clase "seleccionada" a todos los elementos de la lista.

JSX

import React, { useState } from 'react'

export default () => {
    const [showPhoto, setShowPhoto] = useState(false)

    return (
        <ul>
            {photos.map(photo => (
                <li className={showPhoto ? 'selected' : ''} onClick={() => setShowPhoto(!showPhoto)}>
                    <img />
                </li>
            ))}
        </ul>
    )
}

SASS

li
    ...
    img
        ...
    &.selected
        ...
        img
            ...

reactjs gatsby

1

Ryan Prentiss 14 dic. 2019 a las 11:12

Answer 1

Lo que haría crear reactNode separado para su elemento de lista y colocarlo en hacer clic allí. porque ahora solo está agregando clase en cada elemento de la matriz.

const ParentNode=()=>(
  <ul/>
    {arrayOfSomething.map((something,idx)=>
      <key={something+idx}childNode/>
    )}
  </ul>)

//then

const ChildNode =()=>{
  const[isShow, setIsShow]=useState(false)
  return(
    <li onClick={()=>setIsShow(!isShow)}>
      {isShow?something : something else}
    </li>
  )
}

0

Andris Laduzans 22 dic. 2019 a las 18:34

Answer 2

Para resolver el problema, necesitaba aplicar una 'clave' condicional a className y asignar el valor 'clave' a la variable showPhoto a través del oyente onClick de la siguiente manera ...

<ul>
    {photos.map(photo => (
        <li
            className={showPhoto === photo.id ? style.show : ''}
            onClick={() => setShowPhoto(showPhoto === false ? photo.id : false)}
        >
            <img />
        </li>
    ))}
</ul>

0

Ryan Prentiss 14 dic. 2019 a las 10:24

Cómo afectar el uso de Gatsby / React Estado del elemento único dentro de la lista

2 respuestas

Preguntas relacionadas

Nuevas preguntas

reactjs