CODEWITHSUNDEEP
reactjs
Asridh Kumar
Asridh Kumar

Reputation: 525

form is not reset after submit- react js

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;

Upvotes: 0

Views: 1679

Answers (1)

Ralph Najm
Ralph Najm

Reputation: 239

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;

Upvotes: 3

Related Questions