I'm trying to set up multiple useStates on dynamically created elements inside an array.map. Every element inside of the array.map should use the same useState, but have its proper value assigned. For example the array.map has 3 different elements, which all should have "focus" set to false. When clicked, the clicked element's useState should change to true, the others should remain false.
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>
))}
You need to store the id of the project that should have the focus. A single boolean state property isn't going to work.
e.g.
const [focusedProject, setFocusedProject] = useState(undefined);
...
onClick={() => setFocusedProject(project.id)}
then
<div className={` ${focusedProject === project.id ? "focus" : ""} `} key={project.id}>