add array to array state in react hooks gives a number

Question

i declare a Array sate and want to add some Arrays in it like :

const [number, setNumber] = useState(3);
const [TimePickerList, setTimePickerList] = useState([]);
useEffect(() => {
        
        for(var i = 0; i < number ; i++) { 
           setTimePickerList(TimePickerList.push([]))
           
        }
        console.log(TimePickerList); // it gives me an array like this : [[],[],[]]
    }, [number])

but when i get log from TimePickerList in another function it gives me a number (3). and i lost my arrays in my array state (I expected something like this : [[],[],[]] But While gives me the length of the array) I also used concat() but it gives me an empty Array and doesn't add my Arrays

Onur Doğan · Accepted Answer · 2023-12-26 11:19:12Z

1

You can push the values in an empty array. Then set it to your state

    const [number, setNumber] = useState(3);
    const [TimePickerList, setTimePickerList] = useState([]);

    useEffect(() => {
          const list = [];
          for(var i = 0; i < number ; i++) { 
             list.push(i);
          }
          setTimePickerList(list);
    }, [number]);

edited Dec 26, 2023 at 11:19

answered Sep 12, 2022 at 8:02

Onur Doğan

2,11612 gold badges35 silver badges60 bronze badges

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

2 Comments

Mohsen.RJ Over a year ago

thanks man it exactly what i want wish you luck

Onur Doğan Over a year ago

You are welcome bro. Good luck you too.

mbojko · Accepted Answer · 2022-09-12 08:08:30Z

1

Don't mutate the state object, it messes up change detection,
and the value of the expression someArray.push(someValue) is someValue.

Instead do something like

let newList = [...TimePickerList];

for(let i = 0; i < number; i++) {
    newList = [...newList, []];
}

setTimePickerList(newList);

answered Sep 12, 2022 at 8:08

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

1 Comment

Mohsen.RJ Over a year ago

thanks man for take your time and your awesome awnser it works too

dev404 · Accepted Answer · 2022-09-12 08:09:26Z

The state works a bit differently as compared to normal variables and shouldn't be updated directly (for reasons mentioned here https://medium.com/analytics-vidhya/why-we-should-never-update-react-state-directly-c1b794fac59b)

So, I'd recommend making three changes to your code.

Create a temporary variable which contains your list inside the (and you can update it wherever and however you want), e.g. inside your useEffect before for loop const list = [];
Push whatever you want to push inside the variable. So for the above code, it would be: for(let i = 0; i < number ; i++) { list.push(whatever you need to push to the array); }
set the state using that variable. In your case, after the for loop, update the state as: setTimePickerList(list)

Kirill Efimov · Accepted Answer · 2022-09-12 08:11:51Z

1

I've tried your code and it gives a correct output as you wish.

But if you want to set value based on a prev value it's better to pass a callback into setter function which receives current state value

Another point - it's better to call setter function once

const [number, setNumber] = useState(3);
const [timePickerList, setTimePickerList] = useState([]);

useEffect(() => {
  setTimePickerList((prev) => {
    const list = [...prev];
    for(let i = 0; i < number ; i += 1) { 
      list.concat([]);
    }

    return list;
  })
}, [number])

answered Sep 12, 2022 at 8:11

Kirill Efimov

1111 silver badge6 bronze badges

1 Comment

Mohsen.RJ Over a year ago

thanks man for take your time and your awnser it's also one of the way

Andrea Costanzo · Accepted Answer · 2022-09-12 08:55:40Z

1

The fastest way to push an element to a state containing an array is using a callback:

const [number, setNumber] = useState(3);
const [TimePickerList, setTimePickerList] = useState([]);

useEffect(()=>{
 let list = [];
 for(let i = 0; i < number ; i++) { 
   list.push([])
 }
 setTimePickerList((currentArray) => [...currentArray,...list])
},[number])

The only thing I'm guessing is: why adding empty arrays? You know that filling up these arrays will be a nightmare and since you are using a complicated data structure maybe useState is not what you want to use?

NOTICE:

Since changes of state are not performed synchronously you cannot watch the updates to TimePickerList directly in the first useEffect. To see how it changes add a second useEffect:

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

edited Sep 12, 2022 at 8:55

answered Sep 12, 2022 at 8:09

Andrea Costanzo

2,3054 gold badges19 silver badges43 bronze badges

1 Comment

Mohsen.RJ Over a year ago

thanks man for take your time i learn a lot from your awnser wish you luck

Collectives™ on Stack Overflow

add array to array state in react hooks gives a number

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related