onChange event select in ReactJs

Question

I'm trying to get the value of an option inside my select in React.js but somehow e.value is always undefined.

This is the code:

<Col md={4} className="col-padding-left">
                            <Input onChange={this.filterProducts} type="select" name="select" id="exampleSelect">
                                <option name='default'>Default</option>
                                <option name='price' value='desc'>Price (High-Low)</option>
                                <option name='price' value='asc'>Price (Low-High)</option>
                                <option name='addedAt' value='desc'>Added At (First-Last)</option>
                                <option name='addedAt' value='asc' >Added At (Last-First)</option>
                                <option name='name' value='desc'>Name (A-Z)</option>
                                <option name='name' value='asc'>Name (Z-A)</option>
                            </Input>
                        </Col>

With the following function filterProducts:

filterProducts(e){
            console.log(e.value); 
      }

Possible duplicate of [OnChange event using React JS for drop down](https://stackoverflow.com/questions/28868071/onchange-event-using-react-js-for-drop-down) — Sven Tschui, Nov 12 '17 at 18:33

score 2 · Accepted Answer · answered Nov 12 '17 at 18:36

Try this

<Col md={4} className="col-padding-left">
                        <Input onChange={this.filterProducts.bind(this)} type="select" name="select" id="exampleSelect">
                            <option name='default'>Default</option>
                            <option name='price' value='desc'>Price (High-Low)</option>
                            <option name='price' value='asc'>Price (Low-High)</option>
                            <option name='addedAt' value='desc'>Added At (First-Last)</option>
                            <option name='addedAt' value='asc' >Added At (Last-First)</option>
                            <option name='name' value='desc'>Name (A-Z)</option>
                            <option name='name' value='asc'>Name (Z-A)</option>
                        </Input>
                    </Col>


filterProducts = (e) => {
        console.log(e.target.value); 
  }

score 0 · Answer 2 · answered Nov 12 '17 at 18:32

0

You need to use e.target.value

See this question: OnChange event using React JS for drop down

answered Nov 12 '17 at 18:32

Sven Tschui

1,377
8
20

score 0 · Answer 3 · answered Nov 12 '17 at 18:34

0

First, check if you have e. If so, try e.target.value.

answered Nov 12 '17 at 18:34

Vitalii Saienko

27
11

score 0 · Answer 4 · answered Nov 12 '17 at 19:04

The event object doesn't hold a value property.
In order to access the value attribute of element you need to use event.target.value when target is the element that triggered this event.

Running example:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ['john', 'jane', 'greg']
    };
  }

  onSelect = e => {
    console.log(e.target.value);
  }

  render() {
    const{items} = this.state;
    return (
      <div>
        <select onChange={this.onSelect}>
        {
          items.map(item => {
            return (<option value={item}>{item}</option>)
          })
        }
        </select>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<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="root"></div>

score 0 · Answer 5 · answered May 16 '18 at 15:19

According to your request, it's my solution:

<Col md={4} className="col-padding-left">
                            <Input onChange={this.filterProducts} type="select" name="select" id="exampleSelect">
                                <option name='default'>Default</option>
                                <option name='price' value='desc'>Price (High-Low)</option>
                                <option name='price' value='asc'>Price (Low-High)</option>
                                <option name='addedAt' value='desc'>Added At (First-Last)</option>
                                <option name='addedAt' value='asc' >Added At (Last-First)</option>
                                <option name='name' value='desc'>Name (A-Z)</option>
                                <option name='name' value='asc'>Name (Z-A)</option>
                            </Input>
                        </Col>

The function for could be:

filterProducts(e){
    // e.target.id identified the unique element in DOM 
    // in example when 'exampleSelect' make a change (onChange) event
    if(e.target.id === 'exampleSelect'){  
            console.log("Value for exampleSelect: " + e.target.value);   
    }
    // if you have another html input select add here another 'if'
    // with a diferent id. ex.
    if(e.target.id === 'fruitSelect'){  
            console.log("Value for fruit: " + e.target.value);   
    }
    ...
}

¡Ey!, don't forget to bind the function, in the React constructor:

this.filterProducts = this.filterProducts.bind(this);

onChange event select in ReactJs

5 Answers5