select in react doesn't update the label

Question

When i implemented, it worked fine :

 constructor() {
        super(...arguments);
        this.state={
          selectedValue :'' ,
}}

Dropdown Code :

            <select
            className="ui dropdown"
          value={this.state.selectedValue || ''}
          onChange={e =>
            this.setState({
              selectedValue: e.target.value,
              validationError:
                e.target.value === ""
                  ? "You must select"
                  : ""
            })
          }>
          <option value="">--Select Station--</option>
          {this.state.stationList.map(team => (
            <option key={team.id} value={team.id}>
              {team.station}
            </option>
          ))}
        </select>

Now on selecting the value label doesn't update on first time, Second time i click it show with previous label selected and on next time click previous last time label displayed

How can i make it work right like normal on select label should update!

see the video here for label error > video

Answer 1

your code is working well I think their is a problem in your array

check this code on code sandbox

check the given code

or you can see this

 class App extends React.Component { constructor() { super(...arguments); this.state = { selectedValue: "" }; } myArray = [ { id: "1", name: "one" }, { id: "2", name: "two" }, { id: "3", name: "three" } ]; render() { console.log(this.state.selectedValue); return ( <div> <h1>are you listening</h1> <select className="ui dropdown" value={this.state.selectedValue} onChange={e => this.setState({ selectedValue: e.target.value, validationError: e.target.value === "" ? "You must select" : "" }) } > <option value="">--Select Station--</option> {this.myArray.map(team => ( <option key={team.id} value={team.id}> {team.name} </option> ))} </select> </div> ); } } export default App;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

hope this will help

Answer 2

i don't know it should not work but i tried using

forcepdate()

it worked with warnings so i did :

 value={this.updateFunc(this.state.selectedValue)}

and called it like:

updateFunc(e){
console(e);
}

i don't think is nay right approach but this worked for me now so i go with this, state doesn't update immediately, idea of using forceUpdate() brought me to this decision.