How to get select element’s value in react-bootstrap ?

There are several methods to get element’s value in react-bootstrap. Some of them are discussed below:  

Using Ref: First way to get element’s updated value is by using ref. Using ref, we get the reference of the element and its value can be accessed throughout the existing components.

import React, { Component } from "react";
import { Form } from "react-bootstrap";

class GeeksForGeeks extends Component {
    constructor() {
        super();
        this.myRef = React.createRef();
    }
    onButtonClick() {
        console.log(this.myRef.current.value);
    }

    render() {
        return (
            <div>
                Select element of react-bootstrap
                <hr />
            Select color
                <Form.Control
                    as="select"
                    custom
                    ref={this.myRef}
                >
                    <option value="black">Black</option>
                    <option value="amber">Amber</option>
                    <option value="purple">Purple</option>
                    <option value="magenta">Magenta</option>
                    <option value="white">White</option>
                </Form.Control>
                <button onClick={this.onButtonClick}>
                    Gfg color
                </button>
            </div>
        );
    }
}

export default GeeksForGeeks;

Explanation:
• First step is to create Ref in React component

  constructor() {
      super();
      this.myRef = React.createRef();
  }

• Next, with the added ref property implement the react-bootstrap select element followed by the name of reference created before.

  render() {
          return (
            <div>
              Select element of react-bootstrap
              <hr />
              Select color
              <Form.Control
                as="select"
                custom
                ref={this.myRef}
              >
                <option value="black">Black</option>
                <option value="amber">Amber</option>
                <option value="purple">Purple</option>
                <option value="magenta">Magenta</option>
          <option value="white">White</option>
              </Form.Control>
              <button onClick={this.onButtonClick}>Gfg color</button>
            </div>
      );
    }
  

• This statement access the selected option from the select element by extracting the current referenced element from the DOM, then it fetches value.

  onButtonClick() {
      console.log(this.myRef.current.value);
  }
  

Using Form Controls: When the select element is part of the form element, the select element’s value can also be fetched using the form element, by using the event handler attached to the select element.

import React, { Component } from "react";
import { Form } from "react-bootstrap";

class GeeksForGeeks extends Component {
    onFormSubmit(event) {
        event.preventDefault();
        console.log("Color value is :", this.state.color);
    }
    onChangeColor() {
        this.setState({ color: event.target.value })
    }
    render() {
        return (
            <div>
                Select element of react-bootstrap
                <hr />
                <Form onSubmit=
                    {this.onFormSubmit.bind(this)} role="form">
                    <Form.Group controlId="exampleForm.SelectCustom">
                        <Form.Label>Select Color : </Form.Label>
                        <Form.Control as="select"
                            custom onChange=
                            {this.onChangeColor.bind(this)}>
                            <option value="black">Black</option>
                            <option value="amber">Amber</option>
                            <option value="purple">Purple</option>
                            <option value="magenta">Magenta</option>
                            <option value="white">White</option>
                        </Form.Control>
                    </Form.Group>
                    <Button type="submit">Gfg color</Button>
                </Form>
            </div>
        );
    }
}
export default GeeksForGeeks;

Explanation: There are two events used in the form:

1. this.onSubmitForm() method is used to submit the form when user clicks on the submit button.

   onFormSubmit(event) {
       event.preventDefault();
       console.log("Color value is :", this.state.color);
   }
   

2. this.onChangeColor() used to check for the change event of the select element

   onChangeColor() {
       this.setState({ color: event.target.value })
   }
   

When the user changes the select element value, it is updated to the component state.

This method is widely used as each form element maintains it’s state, and once the form is submitted, the updated value can be fetched from the state.

Output: Following is the output of above examples of code:

Further Process: Once the user changes the select element value, it is updated to the component state, and the same state value value sends the data to the database for processing.