Open In App

How to set default value in select using ReactJS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Dropdown and select elements are frequently used in forms where you want to set a default value in select using React Js. 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.

Steps to create the React application:

Step 1: Create React Project

npm create-react-app myreactapp

Step 2: Change your directory and enter your main folder charting as

cd myreactapp

Project Structure:

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.

Example: Here we are using selected attribute in one of the options in the select inputs.

Javascript




// Filename - App.js
 
import { Component } from "react";
import "./App.css";
 
class App extends Component {
    constructor(props) {
        super(props);
    }
 
    render() {
        return (
            <div className="App">
                <h1 className="geeks">Geeks For Geeks</h1>
 
                <form className="container">
                    <select
                        className="item"
                        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;


CSS




/* App.css */
.App {
    text-align: center;
}
.geeks {
    color: green;
}
 
.container {
    display: flex;
    justify-content: center;
}
 
.item {
    min-width: 10rem;
    text-align: left;
}


Steps to run the application:

npm start

Output: This output will be visible on http://localhost:3000/

Peek-2023-10-10-15-54

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.

Step to Install react-select:

Install the react-select module using the following command in the project directory.

npm i react-select

Example: Here we are using arrtibutes in select input component of the react-select library.

Javascript




// Filename - App.js
 
import { Component } from "react";
import Select from "react-select";
import "./App.css";
 
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 className="App">
                <h1 className="geeks">Geeks For Geeks</h1>
                <div className="container">
                    <Select
                        className="item"
                        styles={{ width: "20px" }}
                        value={options.value}
                        options={options}
                        defaultValue={options[1]}
                    />
                </div>
            </div>
        );
    }
}
 
export default App;


CSS




/* App.css */
.App {
    text-align: center;
}
.geeks {
    color: green;
}
 
.container {
    display: flex;
    justify-content: center;
}
 
.item {
    min-width: 10rem;
    text-align: left;
}


Steps to run the application:

npm start

Output: This output will be visible on http://localhost:3000/

Peek-2023-10-10-15-50



Last Updated : 11 Oct, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads