Alternative approach

[dagolinuxoid]

In my App.js I have the method to handle adding a new user (with name and job fields)

    addCharacter = (name, job) => {
      this.setState(
        {
          characters: [...this.state.characters, {name, job}]
        }
      );
    }

And I use the functional Form component :

const Form = (props) => {
  return (
    <form>
      <input name='name' />
      <input name='job' />
      <button type='button' onClick={() => {
        props.addCharacter(
          // use any preferred approach to reference the value in need
          document.forms[0].elements.name.value,
          document.forms[0].elements.job.value
        )
        }}>
        Add
      </button>
    </form>
  )
}

Since your source code is drastically different ( it has a bit more lines and it's kind of hard to easily comprehend for me yet), can you point disadvantages of the way I approached it ( if any ) ?

[taniarascia]

You should never be referencing document in React. You should always use state and event. Your way of retrieving values may be easier for you to understand right now, but the way outlined in the article is how you will see it done in almost any other React app.