How to set default value in select using ReactJS ? - GeeksforGeeks

23 Apr, 2021
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 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
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
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
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to redirect to another page in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS setState()
Re-rendering Components in ReactJS
ReactJS defaultProps
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?