Direct modification of 'AddNinja' component state

[vedhant]

over here :

 handleSubmit = e => {
  e.preventDefault();
  this.props.addNinja(this.state);
 }

while passing this.state in addNinja() function, we are actually passing the state of 'AddNinja' component directly as reference to the function. So this 'AddNinja' state is directly being modified :

 addNinja = (ninja) => {
    ninja.id = Math.random();     // state modified directly here
    this.setState({
      ninjas: [...this.state.ninjas, ninja]
    });
  }

here an id is added directly to 'AddNinja' state which should not be done and hence gives me error when i give submit on same data more than once.

[michaelortega]

@vedhant I have found a solution to this Issue.

First, modify the state inside the AddNinja Component and add a field "id"

class AddNinja extends Component {
    state = {
        name: null,
        age: null,
        belt: null,
        id: null //ADD THIS
    };

...

Second modify the handleSubmit method as follows

// Still inside AddNinja.js
handleSubmit = e => {
        e.preventDefault();
        this.props.addNinja({
            ...this.state,
            id: Math.random()
        });
       // this.props.addNinja(this.state); REMOVE THIS
    };

Lastly, remove the Math.Random() from the main App.js Compoent

class App extends Component {
...
 
  addNinja = (ninja) => {
    //ninja.id = Math.random(); REMOVE THIS
    let ninjas = [...this.state.ninjas, ninja];
    this.setState({
      ninjas: ninjas
    });
  }
...