CODEWITHSUNDEEP
reactjs
Abhilekh Gautam
Abhilekh Gautam

Reputation: 655

setState doesnot change the state in React

So , I have a function that returns a form

return (
<div className="App">
  <header className="nav-container">
    <nav className="my-nav">
      <a href="/">
        <h1 className="brand-name">Admin Panel</h1>
      </a>
       <CgProfile id="pp" size={50}/>
    </nav>
  </header>

  <main className="main-body">
  <div id = "message"></div>
   <div className="form-container">
    <form>
    <select name = "genre" value = {this.state.value} onChange={this.handleChange}>
      <option value = ''>Select a Genre</option>
      <option value = "gk">General Knowledge</option>
      <option value = "gScience">General Science</option>
      <option value = "entertainment">Entertainment</option>
      <option value = "sports">Sports</option>
      <option value = "Politics">Maths</option>
      <option value = "geography">Geography</option>
    </select>

      <input type="text" placeholder="Enter Question" spellCheck="true" name="question" value={this.state.value} onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 1" spellCheck="true" name="option1" value={this.state.value}  onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 2" spellCheck="true" name="option2" value={this.state.value}  onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 3" spellCheck="true" name="option3" value={this.state.value}  onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 4" spellCheck="true" name="option4" value={this.state.value}  onChange={this.handleChange}></input>
      
      <button type="button" onClick={this.handleSubmit}>Add</button>
    </form>
    </div>
  </main>
</div>
);

When the Add button is clicked, the form gets submitted but when I use the setState method to clear the form input field the form field is not being cleared.

My handleSubmit function is:

    handleSubmit = (e)=>{
      e.preventDefault();
      if(this.state.question === '' || this.state.option1 === '' || this.state.option2 === '' || this.state.option3 === '' || this.state.option4 === '' || this.state.genre === '' ){
      var errorMessage = React.createElement('p',{className : "err"},"All fields are required");
     }
    else{
    let queObj = {
      question : this.state.question,
      option : {
        1 : this.state.option1,
        2 : this.state.option2,
        3 : this.state.option3,
        4 : this.state.option4
      },
      genre : this.state.genre,
      submittedBy : "Abhilekh Gautam",
      Date : new Date().toDateString()

    }
   que.push(queObj);
   this.setState({
     question:'',
     option1:'',
     option2:'',
     option3:'',
     option4:'',
     genre:''
   },()=>{
     console.log('SetState called')
     console.log(this.state.question.value)
 })

 var sucessMessage = React.createElement('p',{className : "sucess"},"Question Submitted Sucessfully");


  }

  if(errorMessage)
     ReactDOM.render(errorMessage,document.getElementById('message'))
  
  else if(sucessMessage)
     ReactDOM.render(sucessMessage,document.getElementById('message'));
}

EDIT:1 My handleChange function is

handleChange = (e) =>{
  e.preventDefault();
   this.setState(
     {
       [e.target.name]: e.target.value
    }
   )
}

Upvotes: 1

Views: 71

Answers (1)

Viet
Viet

Reputation: 12777

Because you don't set value of input to value you reset on submit so the value of input will notchange. Just update value of input to exact state:

<input type="text" placeholder="Option 1" spellCheck="true" name="option1" value={this.state.option1}  onChange={this.handleChange}></input>

Upvotes: 1

Related Questions