Estoy tratando de configurar varios estados de uso en elementos creados dinámicamente dentro de un array.map. Cada elemento dentro de array.map debe usar el mismo estado de uso, pero debe tener asignado su valor adecuado. Por ejemplo, array.map tiene 3 elementos diferentes, todos deberían tener "focus" establecido en falso. Cuando se hace clic, el estado de uso del elemento seleccionado debe cambiar a verdadero, los demás deben permanecer falsos.
const [focus, setFocus] = useState(false); { projects.map((project, index) => ( <div className={` ${focus ? "focus" : ""} `} key={project.id}> <div className="cover" to={"/work/" + project.slug} onClick={ () => setFocus(true) }> </div> </div> ))}Debe almacenar la id del project que debe tener el focus . Una sola propiedad de estado boolean no va a funcionar.
p.ej
const [focusedProject, setFocusedProject] = useState(undefined); ... onClick={() => setFocusedProject(project.id)}después
<div className={` ${focusedProject === project.id ? "focus" : ""} `} key={project.id}>