How to correctly initialize a state array React JS - reactjs

Question

I need to initialize a state array with six elements, points, and then update the proper element in the points array when setVote function is called:
const [selected, setSelected] = useState(0)
const setNextItem = (value) => setSelected(value)
const initialValue = new Array(6).fill(0);
const [points, setPoint] = useState(initialValue)
const setVote = (value) => setPoint(value)
// randomly choose the next item
const setNextitem(Math.floor((Math.random() * 5) + 0))
const setVote => {
const copy = [...points]
copy[selected] += 1
return copy;
}
However, when I view points and copy arrays in the console window, points never gets updated with copy. It stay as Array(6) [ 0, 0, 0, 0, 0, 0 ]. Is it always initializing or is the copy array not retuned. What is the correct way to do this?
Here is my final code:
```
const App = () => {
const [selected, setSelected] = useState(0)
const [points, setPoints] = useState(new Array(6).fill(0))
const setNextItem = (value) => setSelected(value)
const setVoteAt = (value) => setPoints(value)
console.log(selected, points)
const next_button = {
name : 'next item',
onClick: () => setNextItem(Math.floor((Math.random() * 5) + 0))
}
const vote_button = {
name : 'vote',
onClick: () => setVoteAt(UpdatePoints(selected))
}
const UpdatePoints = (index) => {
let copy = [...points]
copy[index]++
return copy
}
```

Answer 1

Too many duplicated function and state
Just a little order the code..
react useState is not rective, then you can do useEffect to console.
And then you will see the update array.
const [points, setPoints] = useState(new Array(6).fill(0));
const UpdatePoints = (selected) => {
let copy = [...points];
copy[selected]++;
setPoints(copy);
}
const random = () => Math.floor((Math.random() * 5) + 0)
useEffect(() => console.log(points))
return (
<div onClick={() => UpdatePoints(random())}> ClickMe </div>
);

Answer 2

It looks like it should work for the most part. I'd say these two functions are conflicting, and causing an issue. Are there any errors returned in the console?
const setVote = (value) => setPoint(value)
const setVote => {
const copy = [...points]
copy[selected] += 1
return copy;
}
This last one you may want to rename. Something like setVoteAt which take an index parameter for which vote to set.
const setVoteAt = (index) => {
const copy = [...points]
copy[index] += 1
return copy;
}
setVoteAt(2) // [0, 0, 1, 0, 0, 0]

Answer 3

How to correctly initialize a state array React JS
Use useEffect to initialize it properly. This is similar to componentDidMount.
const [points, setPoints] = useState([])
useEffect(() =>
{
const initialValue = new Array(6).fill(0);
setPoints(initialValue);
}
, []) // initialize only once (on mount) and not on every render
Is it always initializing or is the copy array not retuned. What is the correct way to do this?
setVote() is not doing things correctly. You can update points every time selected is changed by:
useEffect(() =>
{
setPoints(points => {
points[selected] += 1
return points
})
}
, [selected] // only run this effect every time selected changed
)
setNextItem(2) // this will update selected then run the effect on top
// and also increment points[selected]