reactJS <select> does not update the state

Question

I have a reactJS application where I prompt the user for some input. This is the code that asks the user to select an option from a <select> object and enter a string of text into an input box:

<div className="container">
    <div className="row">
        <div className="col-12 test-left text_15">
            <label>Select one of the following questions to answer</label>
        </div>
    </div>
    <div className="row">
        <div className="col-12 text_15">
            <select className="text_15"> value={currentComponent.state.securityQuestion} onChange={(event) => this.saveQuestion(event)}>
                <option value="0">What is you mother's maiden name?</option>
                <option value="1">What elementary school did you attend?</option>
                <option value="2">What was the name of your first pet?</option>
                <option value="3">What city were you born in?</option>
            </select>
        </div>
    </div>
</div>
<div className="spacerAfterButton">
</div> 
<div className="container">
    <div className="row">
        <div className="col-12 text-left text_15">
            <label>Provide the answer to the question you selected</label>
        </div>
    </div>
    <div className="row">
        <div className="col-12 text-center">
            <input type="text" maxLength="20" className={localData.cssAnswer} onChange={(event) => this.saveAnswer(event)}/>    
         </div>
    </div>
</div>

My state looks like this:

    this.state = { 
        passData: this.props.location.state,
        planID: "",
        memberID: "",
        PIN: "",
        userID: "",
        password: "",
        securityQuestion: "",
        securityAnswer: "",
        eMail: ""
     }

I also have the following:

saveQuestion(event) {    
    let currentComponent = this;  
    var localQuestion = event.target.value;
    console.log("localQuestion: ", localQuestion);
    currentComponent.setState({securityQuestion: localQuestion});
 }

and

saveAnswer(event) {
    let currentComponent = this;  
    var localAnswer = event.target.value;
    currentComponent.setState({securityAnswer:localAnswer });
}

when I execute the application and scroll through or click through the select options, I never get anything displayed in my console. At then end of my process, I build a string with the selected value and the text string that was entered. To test, I enter "test string" into the input box and I selected the first select option. I would have expected to see the value "0test string" in my resulting string but I get "test string" proving that the state variable is not being updated via the onChange attached to the select.

Any suggestions?

Answer 1

You have a typo in your select code:

 <select className="text_15"> value={currentComponent.state.securityQuestion} onChange={(event) => this.saveQuestion(event)}> <option value="0">What is you mother's maiden name?</option> <option value="1">What elementary school did you attend?</option> <option value="2">What was the name of your first pet?</option> <option value="3">What city were you born in?</option> </select> 

Should be:

 <select className="text_15" value={currentComponent.state.securityQuestion} onChange={(event) => this.saveQuestion(event)}> <option value="0">What is you mother's maiden name?</option> <option value="1">What elementary school did you attend?</option> <option value="2">What was the name of your first pet?</option> <option value="3">What city were you born in?</option> </select> 

You have an extra > on your select tag.

Answer 2

The way you are setting state is losing your previous state information.

currentComponent.setState({ ...this.state,securityAnswer:localAnswer });

the ...this.state is known as a spread and will preserve the elements of state you do not want to alter.

Answer 3

bind function to this , or use arrow function syntax:

saveQuestion = (event) => {    
  let currentComponent = this;  
  var localQuestion = event.target.value;
  console.log("localQuestion: ", localQuestion);
  this.setState({securityQuestion: localQuestion});
}