javascript - ReactJS, Hooks - How to setState after .map() function? - Stack Overflow

I'm trying to change state, with values from array. Example:

const [state, setState] = useState({});
const test = [1, 2, 3];
        test.map((item, i) => {
          setState({ ...state, [`item-${i}`]: item });
        });

Current state is:

item-2: 3

What I want to achieve is:

item-0: 1,
item-1: 2,
item-2: 3

I've tried to do it in several ways (all looking similar), but the effect is the same :/ does anyone knows how to resolve it?

Thanks!

I'm trying to change state, with values from array. Example:

const [state, setState] = useState({});
const test = [1, 2, 3];
        test.map((item, i) => {
          setState({ ...state, [`item-${i}`]: item });
        });

Current state is:

item-2: 3

What I want to achieve is:

item-0: 1,
item-1: 2,
item-2: 3

I've tried to do it in several ways (all looking similar), but the effect is the same :/ does anyone knows how to resolve it?

Thanks!

• javascript
• reactjs
• react-hooks

Share Follow edited Mar 16, 2020 at 16:52 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Mar 16, 2020 at 15:56 Ola KoziołOla Kozioł 9544 silver badges1010 bronze badges 2

• Don't set state in a loop. const newState = { ...oldState }; test.forEach((item, i) => newState['item-' + i] = item); setState(newState); – Jared Smith Commented Mar 16, 2020 at 16:01
• I hope your example is more plicated than an object filled with keys of item-N, because you're essentially duplicating the functionality of an array :) – Dan Commented Mar 16, 2020 at 16:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can update the state using forEach() method like:

test.forEach((item, i) => {
   setState(state => ({...state, [`item-${i}`]: item}));
});

You can use the functional version of set state and a reduce to acplish this:

  setState(prevState => {
    return test.reduce((acc, next, i) => {
      return {
        ...acc,
        [`item-${i}`]: next
      },
    }, prevState);
  });

This has the advantage of doing it in a single call and is easier to read.