form is not reset after submit- react js - reactjs

Question

My form is not reset after submit. Whats wrong ?? I am trying to set the state properties to null after submit.But the input values are not set to null. Iam not getting whats wrong with my code.Help me to solve this issue.
class AddNinja extends Component {
state = {
id: null, name: null, age: null, belt: null
};
handleChange = e => {
this.setState({[e.target.id]: e.target.value });
};
handleSubmit = e => {
e.preventDefault();
this.props.addNijna(this.state);
this.setState({id: null, name: null, age: null, belt: null });
};
render() {
return (
<div>
<h4>Add Ninja</h4>
<form onSubmit={this.handleSubmit}>
<label htmlFor="name">id : </label>
<input type="text" id="id" onChange={this.handleChange} />
<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 type="submit" className="btn btn-secondary btn-sm m-2">
Submit
</button>
</form>
</div>
);
}
}
export default AddNinja;

Answer 1

You need your inputs to be controlled, meaning they get their value from state and onChange since the state is changed it is reflected in your component. Also set the values to an empty string instead of null to avoid switching from uncontrolled to controlled components at runtime.
You can learn more about about controlled inputs here: https://reactjs.org/docs/forms.html
As for your code what you need to do is:
class AddNinja extends Component {
state = {
id: null, name: null, age: null, belt: null
};
handleChange = e => {
this.setState({[e.target.id]: e.target.value });
};
handleSubmit = e => {
e.preventDefault();
this.props.addNijna(this.state);
this.setState({id: null, name: null, age: null, belt: null });
};
render() {
const {id, name, age, belt} = this.state;
return (
<div>
<h4>Add Ninja</h4>
<form onSubmit={this.handleSubmit}>
<label htmlFor="name">id : </label>
<input value={id} type="text" id="id" onChange={this.handleChange} />
<label htmlFor="name">Name : </label>
<input value={name} type="text" id="name" onChange={this.handleChange} />
<label htmlFor="age">Age : </label>
<input value={age} type="text" id="age" onChange={this.handleChange} />
<label htmlFor="belt">Belt : </label>
<input value={belt} type="text" id="belt" onChange={this.handleChange} />
<button type="submit" className="btn btn-secondary btn-sm m-2">
Submit
</button>
</form>
</div>
);
}
}
export default AddNinja;