how can i clean the input value after i click the button?

Question

the below code works fine, but it has a small issue, it did not clean an input field value when I click the button, so I have tried to put a code this.setState({ name: ''}) into nameChangedHandler that make this input value back to empty, but it does not work and will lock the input value to empty, and then you could not type any data into this input value.

Does it work by using Component Lifecycle?

class AddPerson extends Component {
  state = {
    name: '',
    age: '',
  };

  nameChangedHandler = event => {
    this.setState({ name: event.target.value });
  };

  ageChangedHandler = event => {
    this.setState({ age: event.target.value });
  };

  render() {
    return (
      <div className="AddPerson">
        <input
          type="text"
          placeholder="Name"
          onChange={this.nameChangedHandler}
          value={this.state.name}
        />
        <input
          type="number"
          placeholder="Age"
          onChange={this.ageChangedHandler}
          value={this.state.age}
        />
        <button onClick={() => this.props.personAdded(this.state.name, this.state.age)}>
          Add Person
        </button>
      </div>
    );
  }
}

export default AddPerson;

Answer 1

You clean the name in the button's onClick handler:

<button onClick={() => {
    this.props.personAdded(this.state.name, this.state.age);
    this.setState({ name: '' });
}}>
    Add Person
</button>

Answer 2

class AddPerson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      age: ""
    };
  }

  nameChangedHandler = (event) => {
    this.setState({ name: event.target.value });
  };

  ageChangedHandler = (event) => {
    this.setState({ age: event.target.value });
  };

  handleSubmit = () => {
    this.props.personAdded(this.state.name, this.state.age);
    this.setState({
      name: "",
      age: ""
    });
  };

  render() {
    return (
      <div className="AddPerson">
        <input
          type="text"
          placeholder="Name"
          onChange={this.nameChangedHandler}
          value={this.state.name}
        />
        <input
          type="number"
          placeholder="Age"
          onChange={this.ageChangedHandler}
          value={this.state.age}
        />
        <button onClick={this.handleSubmit}>Add Person</button>
      </div>
    );
  }
}

export default AddPerson;