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.
Table of Content
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.jsimport { Component } from "react";import "./App.css";class App extends Component { constructor(props) { super(props); } render() { return ( <div className="App"> <h1 className="neveropen">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;}.neveropen { 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/
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.jsimport { 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="neveropen">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;}.neveropen { 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/
