How to alert out the value of an option box in React?

Question

I would like to get the values of the option boxes. Here's the sample code I wrote. I am trying to populate the option boxes from arrays. I can tell you details if needed for the solution. Thank you for your help in advance!

import React from 'react';

class Scooters extends React.Component {
  static defaultProps = {
    cat_brand: ['Honda', 'Peugeot', 'Yamaha'],
    cat_cc: ['50cc', '125cc', '150cc', '250cc', '300cc'],
    cat_price: ['20-70 €', '80-120 €', '130-160 €']
  }

  btnClick() {
    alert('Button has been clicked...');
    {/* I would like to alert here the selected options of the boxes. */}

  }

  render() {
    let Brand_categoryOptions = this.props.cat_brand.map(categoryBrand => {
      return <option key={categoryBrand} value={categoryBrand}>{categoryBrand}</option>
    });
    let Cc_categoryOptions = this.props.cat_cc.map(categoryCc => {
      return <option key={categoryCc} value={categoryCc}>{categoryCc}</option>
    });
    let Price_categoryOptions = this.props.cat_price.map(categoryPrice => {
      return <option key={categoryPrice} value={categoryPrice}>{categoryPrice}</option>
    });

  return (

    <div>
      <div className="container-fluid content">
        <h2 className="text-center mt-2">Choose from our Scooters</h2>

        <br></br>

      <form>
      <div class="container col-lg-4 mt-5">
        <table class="table table-bordered">

        <tr><th>Specifications</th> <th>Set the parameters</th></tr>
        <tr><td>Scooter Brand</td> <td><select ref="cat_brand">{Brand_categoryOptions}</select></td></tr>
        <tr><td>Engine CC</td>     <td><select ref="cat_cc">{Cc_categoryOptions}</select></td></tr>
        <tr><td>Unit Price</td>    <td><select ref="cat_price">{Price_categoryOptions}</select></td></tr>
        <tr><th>Action</th> <th><button  onClick={this.btnClick}>Search</button></th></tr>

        </table>
      </div>
      </form>


      </div>
    </div>
  );
}
};

export default Scooters;

Answer 1

You need to add event handler function to select element and store the value in state. Also don’t forget to bind your btnClick function in constructor or use arrow function instead

Below code would work

  dropDownChange = e => {
       this.setState({
            value: e.target.value
        });
  }

  btnClick = () => {
      alert('Option selected ', this.state.value);
  }
  <select ref="cat_price" onChange={this.dropDownChange} value={this.state.value}>{Price_categoryOptions}</select>

Answer 2

Try this. I added an onChange handler on the form which takes the change event, and sets the components state respectively (the state is initialized with a value from your default props, so that if you selected nothing and click it has the default values).

It gets the name attribute on the select element and the value from the event target. And on submit you prevent the default behavior which is the submit, so you can do whatever you want with your data.

class Scooters extends React.Component {

  static defaultProps = {
    cat_brand: ['Honda', 'Peugeot', 'Yamaha'],
    cat_cc: ['50cc', '125cc', '150cc', '250cc', '300cc'],
    cat_price: ['20-70 €', '80-120 €', '130-160 €']
  }

  state = {
    cat_brand: this.props.cat_brand[0],
    cat_cc: this.props.cat_cc[0],
    cat_price: this.props.cat_price[0],
  }

  onChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value })
  }

  btnClick = (event) => {
    event.preventDefault();
    console.log(this.state);
  }

  render() {

    let Brand_categoryOptions = this.props.cat_brand.map(categoryBrand => (<option key={categoryBrand} value={categoryBrand}>{categoryBrand}</option>));
    let Cc_categoryOptions = this.props.cat_cc.map(categoryCc => (<option key={categoryCc} value={categoryCc}>{categoryCc}</option>));
    let Price_categoryOptions = this.props.cat_price.map(categoryPrice => (<option key={categoryPrice} value={categoryPrice}>{categoryPrice}</option>));

    return (

      <div>
        <div className="container-fluid content">
          <h2 className="text-center mt-2">Choose from our Scooters</h2>
          <br></br>
          <form onChange={this.onChange}>
            <div className="container col-lg-4 mt-5">
              <table className="table table-bordered">
                <tbody>
                  <tr>
                    <th>Specifications</th>
                    <th>Set the parameters</th>
                  </tr>
                  <tr>
                    <td>Scooter Brand</td>
                    <td>
                      <select name="cat_brand" ref="cat_brand">{Brand_categoryOptions}</select>
                    </td>
                  </tr>
                  <tr>
                    <td>Engine CC</td>
                    <td>
                      <select name="cat_cc" ref="cat_cc">{Cc_categoryOptions}</select>
                    </td>
                  </tr>
                  <tr>
                    <td>Unit Price</td>
                    <td>
                      <select name="cat_price" ref="cat_price">{Price_categoryOptions}</select>
                    </td>
                  </tr>
                  <tr>
                    <th>Action</th>
                    <th>
                      <button onClick={this.btnClick}>Search</button>
                    </th>
                  </tr>
                </tbody>
              </table>
            </div>
          </form>
        </div>
      </div>
    );
  }
};