Pass value of <select> tag in React.js

Question

Beginner question, but I'm trying to run a test to see how to pass the value of the selected option. Currently trying to console log the selected option's value, in this case value='2' or value='4'. Any advice or leads to the right direction would be greatly appreciated.

testUpdate = selectedValue => {
    console.log(selectedValue);
};

render() {

    return (
        <select
            className='new-lead-dropdown'
            onChange={this.testUpdate}

            <option defaultValue value='1'>
                    Responses
            </option>
            <option value='2'>Phone</option>
            <option value='4'>Screen</option>
            <option value='5'>Interview</option>
            <option value='6'>Offer</option>
            <option value='15'>Hired</option>
        </select>

Answer 1

You can do something like this:

You have to grab the current event during onChange and retrieve the value. Hope this helps.

 <select onChange={(e) => this.testUpdate({ value: e.target.value })}>
    <option defaultValue value='1'>Responses
    <option value="2">Phone</option>
    <option value="4">Screen</option>
    <option value='5'>Interview</option>
    <option value="6">Offer</option>
    <option value="15">Hired</option>
</select>

Answer 2

testUpdate = selectedValue => {
  console.log(selectedValue.target.value);
};

Answer 3

Change,

onChange={this.testUpdate}

to

onChange={e => this.testUpdate(e.target.value)}

Here you need to make sure that you are passing down the selected value like e.target.value in testUpdate function.

Working Sandbox