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,
},
]);
}, []);
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.
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