Using React useState in array.map for multiple elements

Question

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

One of the most recent topics with the same root cause: stackoverflow.com/questions/69558319/… — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Nov 11, 2021 at 13:42

andy mccullough · Accepted Answer · 2021-11-11 13:35:10Z

1

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}>

answered Nov 11, 2021 at 13:35

andy mccullough

9,6817 gold badges38 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Johann Over a year ago

Ah sure, that's a really logical way of doing it. Thanks a lot!

3limin4t0r Over a year ago

You could change the className value to {project.id == focusedProject && "focus"} instead of using an ternary operator. There is also no need to nest the expression inside an string template.

andy mccullough Over a year ago

yes thats true, but when needed to add more class names in the future, without the likes of classnames library etc, most people turn to template literal strings, as in the original question, and in that case {project.id == focusedProject && "focus"} outputs 'false' as one of the class names, which isn't ideal

Collectives™ on Stack Overflow

Using React useState in array.map for multiple elements

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related