Why not use array push() method?

Thou Shalt Not Alter State Directly.

That's pretty much a commandment-level dictum in React. Every time you want to change it you should use setState() handing it the new info to put there. Since push() adds to the existing array instead of returning a new one it goes against that principle.

https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly

Useful note on this topic at https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs

Montalvo Miguelo You are still modifying state directly, via modifying the pervious state. From what I understand, modifying any sort of state directly is not recommended in React.

See the React docs for more information: https://reactjs.org/docs/state-and-lifecycle.html

Also, see this great post: https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1

A better way could be by just updating the new state like this:

class App extends Component {
//...

  newGuestSubmitHandler = e => {
    e.preventDefault();
    if (this.state.pendingGuest !== "") {
      const newPerson = {
        name: this.state.pendingGuest,
        isConfirmed: false,
        isEditing: false
      };
      this.setState(prevState => ({
        guests: [newPerson, ...prevState.guests],
        pendingGuest: ""
      }));
    }
  }

//...
}

You can pass a function to setState method, that function receives the prevState and props as arguments so you could use push as follows:

class App extends Component {
  //...
  newsGuestSubmitHandler(event) {
    event.preventDefault();

    this.setState((prevState, props) => {
      prevState.guests.push({
        name: this.state.pendingGuest,
        isEditing: false,
        isConfirmed: false
      });

      return {
        guests: prevState.guests,
        pendingGuest: ''
      }
    });
  }
}

Array push method would add the new guest object at the end of the array while the intention here is to add it as the first object (index 0) in the array.Otherwise its still possible but the new object would be added at the end i.e it wont be rendered as the first guest component.The implementation would be a little different though