2

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); 
      }
3
  • Which lib are u using for Select? Commented Nov 12, 2017 at 18:32
  • It is e.target.value Commented Nov 12, 2017 at 18:32
  • Possible duplicate of OnChange event using React JS for drop down Commented Nov 12, 2017 at 18:33

5 Answers 5

1

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); 
  }
Sign up to request clarification or add additional context in comments.

Comments

1

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>

Comments

0

You need to use e.target.value

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

Comments

0

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

Comments

0

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);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.