How to set default value in select using ReactJS ?

ReactJS is a well-known JavaScript toolkit for creating user interfaces, and it offers strong features for dynamically managing and modifying HTML elements. Dropdown and select elements are frequently used in forms where you want to preselect an option based on certain criteria or set a default value. This article will examine using ReactJS to set a default value in a select element.

In HTML, the ‘selected’ attribute in the option tag is used to set the default value in the select menu. The same approach can also be used with React to set a default value if we are not using React Select Component. However, if you are using react-select then you need to follow a different approach as covered below.

Following are the two approaches to set the default value in Select using ReactJS:

Approach 1: Without using React Select component

You can use a boolean-selected attribute with an option whose value needs to be set default. If none option is integrated with this attribute first option is selected by default. You can read more about this method in this article.

Syntax:

<option value='value' selected> label </option>

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

Javascript

import { Component } from 'react'

class App extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                <p>Geeks For Geeks</p>

                <form>
                    <select name='languages'
                        style={{ width: '200px' }}>
                        <option value='JAVA'>
                            JAVA
                        </option>
                        <option value='C++'>
                            C++
                        </option>
                        <option value='Javascript' selected>
                            Javascript
                        </option>
                        <option value='Python'>
                            Python
                        </option>
                        <option value='R'>
                            R
                        </option>
                        <option value='Scala'>
                            Scala
                        </option>
                        <option value='Swift'>
                            Swift
                        </option>
                    </select>
                </form>
            </div>
        );
    }
}

export default App;

Output:

Output when code is executed on the local server

Approach 2: Using React Select component

You can use an attribute defaultValue to set the default value in the Select menu If none option is integrated with this attribute first option is selected by default. You can create an Array of the object where you will store all options to be displayed and any single object is passed in the defaultValue attribute.

Syntax:

<Select
    option={optionArray}
    defaultValue={optionArray[index]}
/>

Note: Make sure you have installed the react-select module using the following command.

npm install react-select

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

Javascript

import { Component } from 'react'
import Select from 'react-select';

const options = [
    { value: 'C++', label: 'C++' },
    { value: 'JAVA', label: 'JAVA' },
    { value: 'Javascript', label: 'Javascript' },
    { value: 'Python', label: 'Python' },
    { value: 'Swift', label: 'Swift' }
];

class App extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                <p>Geeks For Geeks</p>

                <Select
                    value={options.value}
                    options={options}
                    defaultValue={options[1]}
                />
            </div>
        );
    }
}

export default App;

Output:

Output when code executed on the local server