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

27 Oct, 2020
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;
First step is to create Ref in React componentconstructor() {
    super();
    this.myRef = React.createRef();
}
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>
    );
  }

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

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: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);
}
this.onChangeColor() used to check for the change event of the select elementonChangeColor() {
    this.setState({ color: event.target.value })
}

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

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

this.onChangeColor() used to check for the change event of the select elementonChangeColor() {
    this.setState({ color: event.target.value })
}

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.
Bootstrap-Misc
react-js
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?