Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to set default value in select using ReactJS ?

  • Last Updated : 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :