How to get previous value of <select> in React?

drop-down-menu, javascript, reactjs

Solution

You can use React's controlled components to achieve this. The `state` will have the previous value.

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

<script type="text/babel">
class Select extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      select: 'red',
    }
    this.onSectChange = this.onSectChange.bind(this)
  }
  
  onSectChange(e) {
    var newVal = e.target.value
    console.log(this.state.select, newVal)
    this.setState({
      select: newVal,
    })
  }
  
  render() {
    return <select className="foo" onChange={this.onSectChange} value={this.state.select}>
    <option value="no color">No Color</option>
    <option value="red">Red</option>  // this one is selected
    <option value="green">Green</option> // this one I will select
    <option value="blue">Blue</option>
    </select>  
  }

}
ReactDOM.render(<Select/>, document.getElementById('app'))
</script>

Problem

An example. `red` is selected from the very start. Then I select `green`. That is, from `red` to `green`. I can get new value `green` in `event.currentTarget.value`. But how do I get previous `red`? ``` <select className="foo" onChange={this.onSectChange} value="red"> <option value="no color">No Color</option> <option value="red">Red</option> // this one is selected <option value="green">Green</option> // this one I will select <option value="blue">Blue</option> </select> onSectChange = (event) => { let prevVal = event.??? // How to get a previous value, that is Red let newVal = event.currentTarget.value; // Green - is a new value just selected, not previous } ``` I mean, does React provide this functionality out-of-the-box along with their `SyntheticEvent` creation? Or do I still have to hack to get it?

Original source