Antd select default value not working

antd Select Default Value Not Working

The Ant Design (antd) Select component provides a way to create a dropdown list with multiple options. To set a default value for the Select component, you can make use of the defaultValue prop or the defaultOpen prop.

Example 1: Using defaultValue prop

In this example, we have a Select component with three options: “Option 1”, “Option 2”, and “Option 3”. The defaultValue prop is set to “Option 2”. This will make “Option 2” selected by default when the Select component renders.


    import React from 'react';
    import { Select } from 'antd';
    
    const { Option } = Select;
    
    const MySelect = () => (
      <Select defaultValue="Option 2">
        <Option value="Option 1">Option 1</Option>
        <Option value="Option 2">Option 2</Option>
        <Option value="Option 3">Option 3</Option>
      </Select>
    );
    
    export default MySelect;

Example 2: Using defaultOpen prop

If you want to have the dropdown open by default, you can use the defaultOpen prop. In this example, the Select component will render with the dropdown open, revealing the available options.


    import React from 'react';
    import { Select } from 'antd';
    
    const { Option } = Select;
    
    const MySelect = () => (
      <Select defaultOpen>
        <Option value="Option 1">Option 1</Option>
        <Option value="Option 2">Option 2</Option>
        <Option value="Option 3">Option 3</Option>
      </Select>
    );
    
    export default MySelect;

Make sure you have properly imported the Select component from the antd library before using it in your code. Also, ensure that you have installed the required antd dependencies before running the code.

Antd select default value not working