How can set array useState in loop for add more item in default array?

Question

I had an array with 10 item First, I added 5 item in useState

const [dataList, setDataList] = useState([])
useEffect(() => {
  const newArr = []
  for (var i = 0; i < 5 && i < data.length; i++) {
       newArr.push(data[i])
      }
      setDataList(newArr)
    }, [])

Then, when I added 5 item left, I got not expect result

onPress = () => {
    const newArr2 = []
    for (var i = 5; i < 10 && i < data.length; i++) {
        newArr2.push(data[i])
    }
    setDataList([...dataList, newArr2])
    console.log("dataList", dataList)
}

https://i.stack.imgur.com/lB0JD.png

How can I push 5 item left into the useState array? Sorry for my bad English.

score 3 · Answer 1 · answered Oct 01 '19 at 05:05

3

You are spreading your current array, but not the new one:

setDataList([...dataList, ...newArr2])

answered Oct 01 '19 at 05:05

Chris B.

5,477
1
12
30

score 3 · Accepted Answer · answered Oct 01 '19 at 05:32

3

The alternative to spread syntax could be:

setDataList(dataList.concat(newArr2))

answered Oct 01 '19 at 05:32

Bakhtiiar Muzakparov

2,308
2
15
24

How can set array useState in loop for add more item in default array?

2 Answers2