How to set a default value in react-select

How to Set a Default Value in react-select

If you are working with React and using the react-select library for dropdowns, you might come across a scenario where you need to set a default value for the select component. In this blog post, we will explore different ways to achieve this.

Method 1: Using the defaultValue prop

The easiest way to set a default value in react-select is by using the defaultValue prop. This prop allows you to set the initial value of the select component.

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

const MySelect = () => {
  return (
    
  );
};

export default MySelect;
  
  In the above example, we are setting the default value to be the first option in the options array. You can modify the defaultValue prop to set any other option as the default value.
Method 2: Using the value prop
  Another way to set a default value in react-select is by using the value prop. This prop allows you to control the value of the select component by using state.

import React, { useState } from 'react';
import Select from 'react-select';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

const MySelect = () => {
  const [selectedOption, setSelectedOption] = useState(options[0]);

  const handleChange = (option) => {
    setSelectedOption(option);
  };

  return (
    
  );
};

export default MySelect;