Random set key is being cached? - reactjs

Question

I am following a tutorial for React/Redux (https://youtu.be/WQMglp-JASk). This part of the tutorial adds a simple form to the page and adds each entry into another section. Here is the code for adding the new info to the page:
addNinja = (ninja) => {
ninja.id = Math.random();
let ninjas = [...this.state.ninjas, ninja];
this.setState({
ninjas: ninjas
});
};
The ninja object is being passed to this method from this code:
state = {
name: null,
age: null,
belt: null
};
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
});
};
handleSubmit = (e) => {
e.preventDefault();
this.props.addNinja(this.state);
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label htmlFor="name">Name:</label>
<input type="text" id="name" onChange={this.handleChange}/>
<label htmlFor="age">Age:</label>
<input type="text" id="age" onChange={this.handleChange}/>
<label htmlFor="belt">Belt:</label>
<input type="text" id="belt" onChange={this.handleChange}/>
<button>Submit</button>
</form>
</div>
);
}
And the component JSX that is reused on submit:
<div className="ninja" key={ninja.id}>
<div>Name: {ninja.name}</div>
<div>Age: {ninja.age}</div>
<div>Belt: {ninja.belt}</div>
<button onClick={() => {deleteNinja(ninja.id)}}>x</button>
</div>
ninja.id is the key for the element being added.
The first submit works fine, any subsequent submits use the same key generated by Math.random() on the first submit. I also see the warning Encountered two children with the same key in the console for each subsequent submit.
When I console log the random number it is a different each time, but ninja.id is not being set to the new random number.
I assume caching is at play here but can someone please explain why this might be happening?

Answer 1

Well, the way you are adding the id for your ninja you are mutating your state which is a big no-no for react. So the following:
let ninjas = [...this.state.ninjas, ninja];
should be:
let ninjas = [...this.state.ninjas,
{
id: Math.random(),
name: this.state.name,
age: this.state.age,
belt: this.state.belt
}
];
There are definitely better ways for using as id for iterating items within an array such as https://www.npmjs.com/package/uuid

Answer 2

Ok, so I actually got this working myself but I would love for someone to tell me what the issue is.
To get it working, the AddNinja method should be:
addNinja = (ninja) => {
let ninjas = [...this.state.ninjas, {
"name": ninja.name,
"age": ninja.age,
"belt": ninja.belt,
"id": Math.random()
}];
this.setState({
ninjas: ninjas
});
};
I have no idea why this works and the other version doesn't so any help would be appreciated :)