React Bootstrap select option not showing

Active3 hr before
Viewed126 times

8 Answers


How many iterations to reach the sequence? ,in the first dropdown select Green:,Asking for help, clarification, or responding to other answers., How common is it in British (European?) tech firms to request a payslip before extending an offer?

First Component

   value={this.state.selectedToBucket &&}
load more v

Add the readOnly prop on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.,Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.,If your application contains a large number of form groups, we recommend building a higher-level component encapsulating a complete field group that renders the label, the control, and any other necessary components. We don't provide this out-of-the-box, because the composition of those field groups is too specific to an individual application to admit a good one-size-fits-all solution.,Provide a function child to manually handle the layout of the FormCheck's inner components.

   <Form.Group className="mb-3" controlId="formBasicEmail">
      <Form.Label>Email address</Form.Label>
      <Form.Control type="email" placeholder="Enter email" />
      <Form.Text className="text-muted"> We'll never share your email with anyone else. </Form.Text>
   <Form.Group className="mb-3" controlId="formBasicPassword">
      <Form.Control type="password" placeholder="Password" />
   <Form.Group className="mb-3" controlId="formBasicCheckbox">
      <Form.Check type="checkbox" label="Check me out" />
   </Form.Group> <Button variant="primary" type="submit"> Submit </Button>
load more v

How can I set the default value for a FormControl component that has its componentClass set to 'select'? For text FormControls it works fine, but for select it wont work.,Using value instead of defaultValue worked for me.,thank you! you really saved me. this is crazy, the defaultValue doesn't work but value works.,This is still an issue. defaultValue does not show in the select box if children are present. The first option is shown instead.

    const renderOptions = (options) => {
        return => {
            return <option key={} name={} value={i.value}>{i.value}</option>;

    return (
        <FormGroup controlId={}>

            <FormControl componentClass="select" defaultValue={field.default} {...field.input}>

            {field.meta.touched && field.meta.error && <span className="red-text">{field.meta.error}</span>}
load more v

You've now used a simple select element to get the selected value using ref. Often, however, the select element will be part of the form element.,In that case, the select element’s value can also be fetched using the form element, by using the event handler attached to the select element.,Along with the select element, there is an added property attached called onChange, which is used to get the updated value of the select element.,The select element is a common part of most forms out there to get selected values from the user. In this guide, you have learned how to get the value of the selected item from the select element using ref and the form element. I hope it will help as you play around with the select element.

1import React, { Component } from "react";
2import { Form } from "react-bootstrap";
4class SimpleSelect extends Component {
5  onChangeColor() {
6    console.log(;
7  }
9  render() {
10    return (
11      <div>
12        Simple select element of react-bootstrap
13        <hr />
14        Select any color :
15        <Form.Control
16          as="select"
17          custom
18          onChange={this.onChangeColor.bind(this)}
19        >
20          <option value="red">Red</option>
21          <option value="blue">Blue</option>
22          <option value="green">Green</option>
23          <option value="black">Black</option>
24          <option value="orange">Orange</option>
25        </Form.Control>
26      </div>
27    );
28  }
31export default SimpleSelect;
load more v

index.js file from create-react-app should look more or less like this:,But when it renders on the page, the select options don't show up on click. Going into devtools, the options appear like this,Sure import ./App after mdb files like this,I added an answer below with the imports and the array I use

Hello, I am trying to use a select component in one of my forms. I've assembled it like this

        </MDBSelect>                <MDBSelect multiple>                    <MDBSelectInput selected="Choose diameters"/>                    <MDBSelectOptions>                        <MDBSelectOption disabled>Choose lengths</MDBSelectOption>                        { => (                            <MDBSelectOption value={}>{item.value}</MDBSelectOption>                        ))}                    </MDBSelectOptions>                </MDBSelect>

But when it renders on the page, the select options don't show up on click. Going into devtools, the options appear like this

<li context="[object Object]" data-multiple="false" class=""><span data-multiple="false" class="filtrable">Option nr 1</span></li>
load more v

npm i react-bootstrap-country-select,,,A country select component with flag icons for React Bootstrap.


yarn add react - bootstrap - country - select


npm install react - bootstrap - country - select
import 'bootstrap/dist/css/bootstrap.css'; // or include from a CDN
import 'react-bootstrap-country-select/dist/react-bootstrap-country-select.css';
import React, { useState } from 'react';
import CountrySelect from 'react-bootstrap-country-select';

const MyComponent = () => {

  const [ value, setValue ] = useState(null); 

  return (

load more v

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.,Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.,However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual .dropdown-item elements using the cursor keys and close the menu with the ESC key., Examples

<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
   <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
load more v

There are several methods to get element’s value in react-bootstrap. Some of them are discussed below:  ,this.onChangeColor() used to check for the change event of the select element,How to add active class on click event in custom list group in Bootstrap 4 ?,How to use bootstrap-select for dropdown ?

load more v

Other "bootstrap-select" queries related to "React Bootstrap select option not showing"