How to Set Selected Option of a Select in React? - Coding

In the React setting the selected option of a Select can be achieved using different approaches including using the native HTML <select> element and using third-party select components like react-select.

We will discuss two approaches to Setting selected options of a select in React:

Table of Content

Using the native ‘select’ element
Using react-select component

Prerequisites:

Steps to Setup ReactJS Application

Step 1: Create a reactJS application by using this command

npx create-react-app my-app

Step 2: Navigate to the Project folder

cd my-app

Step 3: Install the necessary packages/libraries in your project using the following commands

npm install react-select

Project structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-select": "^5.8.0",
    "web-vitals": "^2.1.4"
  }

Approach 1: Using the native ‘select’ element

In this approach we are using the built-in HTML <select> element provided by the browser. We will use state to manage the selected option.

Example: This example uses native <select> element to set the option of a select in React.

JavaScript

import React, { useState } from 'react';

function App() {
    const [selectedOption, setSelectedOption] = useState('');

    const handleChange = (event) => {
        setSelectedOption(event.target.value);
    };

    return (
        <div>
            <h3>Welcome to GeeksForGeeks</h3>
            <select
                value={selectedOption}
                onChange={handleChange}
                style={{
                    padding: '10px',
                    fontSize: '14px',
                    borderRadius: '5px',
                    border: '1px solid #ccc',
                    width: '150px'
                }}>

                <option value="">Select State</option>
                <option value="Maharashtra">Maharashtra</option>
                <option value="Bihar">Bihar</option>
                <option value="Goa">Goa</option>
                <option value="Gujrat">Gujrat</option>

            </select>
            <p>Selected option: {selectedOption}</p>
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project

npm start

Output:

Using the native element

Approach 2: Using react-select component

In this approach we will use a third-party library react-select to set selected option .react-select offers enhanced functionality and styling options compared to native <select> elements.

Example: This example uses react-select component to set the option of a select in React.

JavaScript

import React, { useState } from 'react';
import Select from 'react-select';

const App = () => {
    const countries = [
        { value: "0", label: "Select Country" },
        { value: "1", label: "USA" },
        { value: "2", label: "India" },
        { value: "3", label: "Japan" },
        { value: "4", label: "Mexico" }
    ];

    const [selectedOption, setSelectedOption] = useState(countries[0]);

    const handleChange = (option) => {
        setSelectedOption(option);
    };

    return (
        <div>
            <div style={{ marginBottom: '10px' }}>
                <h3>Welcome to GeeksForGeeks</h3>
                <Select
                    value={selectedOption}
                    onChange={handleChange}
                    options={countries}
                />
            </div>
            <div style={{ fontWeight: 'bold' }}>
                Selected Option:
                <span style={{ color: '#007bff' }}>
                    {selectedOption.label}
                </span>
            </div>
        </div>
    );
};

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project

npm start

Output:

Using react-select component

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Server Actions in Next.js
How To Handle Loading Between Page Changes in NextJS?
How to Optimize the Performance of React-Redux Applications?
How to Add a Background Image in Next.js?
How To Create Dynamic Breadcrumbs Component in NextJS?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	15