form is not reset after submit- react js

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;

Your state is getting cleared, but since your values to input are not taking the values from the state, that's the reason your UI is not updating with the blank values. Answer below by @ralph solves the issue — simbathesailor
– simbathesailor, Commented Oct 31, 2018 at 7:42

Ralph Najm · Accepted Answer · 2018-10-31 07:39:58Z

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;

Collectives™ on Stack Overflow

form is not reset after submit- react js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related