Select tag in Bootstrap and React Bootstrap

Each component has been built from scratch as a true React component. React is a library for web and native user interfaces and it is used for building Single Page Applications(SPA). The markup syntax used is called JSX(Javascript and XML) as can be seen in below examples.

Bootstrap is the most popular HTML, CSS, and JavaScript framework for building responsive, mobile-first websites. It is sleek, intuitive, and powerful front-end framework for faster and easier web development.

To use the standard Bootstrap select tag, the .form-select class is added to the HTML <select> element. For example:

<select class="form-select" aria-label="Default select example">

  <option selected>Open this select menu</option>

  <option value="1">One</option>

  <option value="2">Two</option>

  <option value="3">Three</option>

</select>

React Bootstrap 

React Bootstrap is a dynamic front-end framework that combines the power of React, a popular JavaScript library, with Bootstrap, a versatile CSS framework where each component has been built from scratch as a true React component. Below provided is a simple example for implementing react-bootstrap HTML Select Tag.

import Form from 'react-bootstrap/Form';

function SelectBasicExample() {

  return (
    <Form.Select aria-label="Default select example">
      <option>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </Form.Select>
  );
}

Practical Example where products categories are listed which can be selected:

<Form.Select aria-label="Default select example"
   onChange={e => handleProductDetails(e)}
   name="categoryId"
   value={product.categoryId || ""}
 >
      {categories.map(category => {
         return <option key={category.id} value={category.id}>{category.name}</option>  
                })}
</Form.Select>