ReactJs UseState : insert element into array not updating

Question

I am trying to use React Hooks but somehow my state is not updating. When I click on the checkbox (see in the example), I want the index of the latter to be added to the array selectedItems, and vice versa

My function looks like this:

const [selectedItems, setSelectedItems] = useState([]);

const handleSelectMultiple = index => {
    if (selectedItems.includes(index)) {
        setSelectedItems(selectedItems.filter(id => id !== index));
    } else {
        setSelectedItems(selectedItems => [...selectedItems, index]);
    }
    console.log("selectedItems", selectedItems, "index", index);
};

You can find the console.log result here

An empty array in the result, can someone explain to me where I missed something ?

Actually there isn't a problem with your code. It's just that when you log selectedItems the state isn't updated yet. — Omar
– Omar, Commented Mar 6, 2020 at 10:18
setSelectedItems is asynchronous, it will not update state immediately. You are getting stale state. — Gulam Hussain
– Gulam Hussain, Commented Mar 6, 2020 at 10:19
@hussain.codes , so what are instruction added, to have the current state of the array — Mojackoo
– Mojackoo, Commented Mar 6, 2020 at 10:24

Linschlager · Accepted Answer · 2020-03-06 13:34:00Z

3

Because useState is asynchronous - you wont see an immediate update after calling it.

Try adding a useEffect which uses a dependency array to check when values have been updated.

useEffect(() => {
    console.log(selectedItems);
}, [selectedItems])

edited Mar 6, 2020 at 13:34

Linschlager

1,63912 silver badges19 bronze badges

answered Mar 6, 2020 at 10:16

Harmenx

9461 gold badge5 silver badges13 bronze badges

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

1 Comment

Mojackoo Over a year ago

when I try useEffect and i log(selectedItems) I have the latest index added in the array not list of indexes, the problem that the concatenation of indexes does not do this correctly

Omar · Accepted Answer · 2020-03-06 10:33:31Z

0

Actually there isn't a problem with your code. It's just that when you log selectedItems the state isn't updated yet.

If you need selectedItems exactly after you update the state in your function you can do as follow:

const handleSelectMultiple = index => {
    let newSelectedItems;
    if (selectedItems.includes(index)) {
        newSelectedItems = selectedItems.filter(id => id !== index);
    } else {
        newSelectedItems = [...selectedItems, index];
    }
    setSelectedItems(newSelectedItems);
    console.log("selectedItems", newSelectedItems, "index", index);
};

answered Mar 6, 2020 at 10:33

Omar

16.7k10 gold badges53 silver badges69 bronze badges

2 Comments

Mojackoo Over a year ago

when i do this change montioned in my function , this is the result after adding 3 new indexes, newSelectedItems [1] index 1 newSelectedItems [2] index 2 newSelectedItems [3] index 3 the expected result => newSelectedItems[1,2,3] index 3 . it's like setSelectedItems() doesn't work, it doesn't update the array, it always keeps the initial state of the array

Omar Over a year ago

Can you post your entire component? I just tested it and it works fine.

Collectives™ on Stack Overflow

ReactJs UseState : insert element into array not updating

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related