fill an array with useEffect and map()

Question

i am trying to give an array an initial value at every render, This is what i got for the moment

const [activeMarket, setActiveMarket] = useState([]); const Markets = [ 'DE', 'ES', 'FR', 'UK'], i got the values after some filtering in the state.session. const CountryCode = DE, i got the value after some filtering in the state.session.

and i am trying to fill an array at every render using these values this is what i got for the moment

  useEffect(() => {
   markets.map((item) => {
    setActiveMarket([
      ...activeMarket,
      {
        id: item,
        isActiveMarket: true,
        brandName,
      },
    ]);
  });
}, []);

i keep getting an empty array, i don't know what i am doing wrong exactly cause when i did this it worked but only with one object:

  useEffect(() => {
   setActiveMarket([
     ...activeMarket,
     {
       id: countryCode,
       isActiveMarket: true,
       brandName,
     },
   ]);
 }, []);

Boss you might want to organise your code to make it reflects the update you going to mark otherwise you will have trouble in the future — MUGABA
– MUGABA, Commented May 19, 2022 at 7:57

Silvex · Accepted Answer · 2022-05-19 07:57:42Z

1

Try creating a new local array in the useEffect and then after mapping it, assign it to the state variable like this:

useEffect(() => {
   const tmpMarkets = markets.map((item) => ({
      id: item,
      isActiveMarket: true,
      brandName
   });
   setActiveMarket(tmpMarkets);
}, []);

Your first snippet is continuously resetting the state variable in each loop, so that's why you are not getting the right array.

answered May 19, 2022 at 7:57

Silvex

1867 bronze badges

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

1 Comment

MUGABA Over a year ago

good thinking here I like it

R4ncid · Accepted Answer · 2022-05-19 08:21:29Z

0

you can do this

  useEffect(() => {
   
    setActiveMarket(activeMarket => [
      ...activeMarket,
      ...markets.map((item, i) => ({
        id: item,
        isActiveMarket: i === 0,
        brandName,
      }))
    ]);
  });
}, []);

your first example is not right because you are continuously setting the state and that triggers the rerendering of the component

edited May 19, 2022 at 8:21

answered May 19, 2022 at 7:52

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

fill an array with useEffect and map()

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related