React state missing - reactjs

Question

I am working with React and I can't seem to define properly the state of a component (handlePoints). When I want to assign a new state using shallow copy it creates a new entry (key).
Apologies that part of the question is not in code. I couldn't edit it here. If you need more information please reach out. Thanks! I've added an image where you can see that there is a new entry added instead of a modification happening to an existing entry.
cons anecdotes = ['Anecdote A', 'Anecdote B', 'Anecdote C', 'Anecdote D', 'Anecdote E', 'Anecdote F']
const Button = ({text, onClick}) => <div>
<button onClick={onClick}>{text}</button>
const records = () => {
const temp = {};
for (let i = 0; i < anecdotes.length; i++) {
temp[i] = 0;
}
return temp}
const copy = {...records()};
const App = (props) => {
console.log('Copy', copy);
const [selected, setSelected] = useState(0);
const [points, setPoints] = useState(copy);
const handleSelection = () => {
setSelected((Math.random() * (anecdotes.length) ) << 0);
};
const handlePoints = () => {
setPoints({...copy, selected: copy[selected] += 1})
};
return (
<div>
<p>{JSON.stringify({copy})}</p>
<p>{JSON.stringify({points})}</p>
<p>Selected: {selected}</p>
<Button onClick={handleSelection} text={'next anecdote'}/>
<Button onClick={handlePoints} text={'vote'}/>
has {copy[selected]} votes <br/>
{props.anecdotes[selected]} <br/>
</div>
);};
The line where I cannot set the state correctly is:
const handlePoints = () => {
setPoints({...copy, selected: copy[selected] += 1})
};
As you can see, a new entry was added instead of updating one of the existing one.

Answer 1

In terms of why a new field with key 'selected' is being added, is due to how you are creating the new object.
If you want to to update the key with the variable selected, you would need to modify the handlePoints function to be:
const handlePoints = () => {
setPoints({...copy, [selected]: copy[selected] += 1})
};
The brackets around the variable selected is how it determines to use the value of the variable selected. Instead of interpreting it as a the key 'selected'. This is making use of the computed property names introduced in emca2015. More info - Computed property names
Hopefully this solves your problem :)
Good luck :D
Also:
As for what I can see, your copy function it isn't actually copying any object, it seems to be a default? Or is the purpose just to create the keys for the number of anecdotes there are?
Just curious XD