Select option value not equal when change value

Question

I try to build a message page for help and support at my web, I use a <select> and <option>. But when i change a option value from <select>, the value return to default value first and then change to next value

This is my select

<select
   id="selectMessageSubject"
   defaultValue={this.state.subject}
   onChange={this.handleSubjectChange}
   className="form-control"
>
   <option value="PRAY">{ T.translate('message.pray') }</option>
   <option value="INFO">{ T.translate('message.info') }</option>
   <option value="CARE">{ T.translate('message.treat') }</option>
</select>

and this is my function to handle when the value is change

handleSubjectChange(evt){
        this.setState({ subject: evt.target.value });
        console.log(this.state.subject);
    }

and this is my default value for <select>

constructor(props){
   super(props);
   this.state={
       subject: 'PRAY'
   }
this.handleSubjectChange = this.handleSubjectChange.bind(this);

`handleSubjectChange(evt){ this.setState({ subject: evt.target.value }, () => { console.log(this.state.subject); }); }` You should check value of state in callback — Ryan Nghiem, May 29 '20 at 08:08
Oo, thank you so much @DrewReese that very help me, but i still confuse, why my code not working correctly, any explanation? — Marvin Paulus, May 29 '20 at 08:14
@RyanNghiem, oo ok thank you so much for the help, but still confuse what the difference if i set condole.log outside setState and inside setState? Honestly i new at react so i don't understand react very much — Marvin Paulus, May 29 '20 at 08:18
Can you explain a bit more what "...the value return to default value first and then change to next value" means? Or provide a minimal/complete/reproducible demo in a codesandbox? — Drew Reese, May 29 '20 at 08:19
I mean, i have a state name subject and the value is 'PRAY' and at select tag i set subject as default value, i want when i change option my subject value is change, so i use setState to change it, when i run my code, state of subject is change, but for the first time i change option on select tag it not change, but still default value as 'PRAY' — Marvin Paulus, May 29 '20 at 08:55
@MarvinPaulus Does this [codesandbox](https://codesandbox.io/s/serene-wind-mb4o7?expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark) reproduce the issue you see? — Drew Reese, May 31 '20 at 02:56
@MarvinPaulus Ok, yeah, as expected. You were simply logging the current state value and not the value in the next render cycle after state has been updated. — Drew Reese, Jun 11 '20 at 01:50
@DrewReese Oo, so that is the problem why my state not change when my option value change, because i was logging to current value but not to next value of render cycle. Ok thanks for explanation, you are very helpful — Marvin Paulus, Jun 11 '20 at 02:11
@MarvinPaulus The state is/was updating, you were just logging it in the wrong way. — Drew Reese, Jun 11 '20 at 04:08

Select option value not equal when change value

0 Answers0