0

I am trying to create a very easy array of number using a loop and the spread syntax, the goal :

    const number = props.numberProp


    const [numbers, setNumbers] = useState([
        {numberName: 1, key: 1},
        {numberName: 2, key: 2},
        {numberName: 3, key: 3},
        {numberName: 4, key: 4},
    ])

but it dosen't work, my loop seems to work properly but it dosent assign the value to the array.

const number = props.numberProp

const [numbers, setNumbers] = useState([])

let i = 0;
while(i < number){
    setNumbers(...numbers, {numberName: i, key: i})
    i++      
}

I looked for tutorials and videos but didn't manage to solve my problem.

Rahul Sharma
  • 9,534
  • 1
  • 15
  • 37
owdji
  • 151
  • 2
  • 12

2 Answers2

2

when you set a new value make sure you add previous also

const number = props.numberProp;

const [numbers, setNumbers] = useState([]);

const nums = [];
for (let i = 0; i < number; i++) {
  nums.push({ numberName: i, key: i });
}
setNumbers((numbers) => [...numbers, ...nums]);
Rahul Sharma
  • 9,534
  • 1
  • 15
  • 37
  • thank you for your fast answear but it's still not working, I have an infinite loop and it's assigning `number` instead of `i`, I looked if `i` was the problem but no, it dosen't work even if I assign a specific value to `i`. here is what `console.log(numbers)' looks like : 0: ' {numberName: 33, key: 33} 1: {numberName: 33, key: 33} 2: {numberName: 33, key: 33} 3: {numberName: 33, key: 33}' and so on... – owdji Dec 28 '21 at 18:13
  • @owdji I've updated my answer hope that helps and it's more performant also. – Rahul Sharma Dec 29 '21 at 04:20
  • With your code I managed to do the array after that my component was still rerendering an infinite time but this problem was solved with useEffect(). Thanks. – owdji Dec 29 '21 at 16:53
1

Two things here :

  • you're forgotting [ in your setNumbers
  • setting a state is asynchronous, so you must use the previous value provided by setNumbers :
setNumbers(prev=> [...prev, {numberName: i, key : i}])
krirkrirk
  • 427
  • 1
  • 3
  • 8