Setting Selected Value in Ant Design Select with Validation (2026)

Ant Design's Select component is a powerful tool for creating dropdowns in your React applications. However, populating a Select field with a preselected value, especially when dealing with form validation, can sometimes be challenging. In this comprehensive guide, we will explore how to set up a selected value in an Ant Design Select component while ensuring compatibility with ReactJS validation rules. This approach is particularly useful when editing existing records, such as a currency conversion setup, providing users with a seamless experience.

Prerequisites

• Basic knowledge of ReactJS and functional components.
• Understanding of Ant Design components, specifically Select and Form.
• Node.js installed with npm/yarn for package management.
• Access to a development environment with Ant Design version 4.16.6 or later.

Step 1: Setting Up Your React Application

To get started, ensure that your React application is set up and that you have Ant Design installed. If you haven’t already done so, you can create a new React application and install Ant Design as follows:

npx create-react-app ant-design-form
cd ant-design-form
npm install antd@4.16.6

Step 2: Importing Required Components

In your App.js or any other component file where you wish to implement the Select component, start by importing the necessary components from Ant Design.

import React, { useState, useEffect } from 'react';
import { Form, Select, Button } from 'antd';

const { Option } = Select;

Step 3: Setting Up the Form with Initial Values

We will create a form that can populate fields using an existing record, such as the currencyConversionById object you described. This allows users to edit the record with prefilled data.

const currencyConversionById = {
  base_currency: "USD",
  base_amount: 1,
  to_currency: "CAD",
  to_amount: 2.45
};

const currencyList = [
  { currency: 'USD' },
  { currency: 'CAD' },
  { currency: 'EUR' },
];

const CurrencyForm = () => {
  const [form] = Form.useForm();

  useEffect(() => {
    // Set initial form values
    form.setFieldsValue({
      base_currency: currencyConversionById.base_currency,
      to_currency: currencyConversionById.to_currency
    });
  }, [form]);

Step 3.1: Rendering the Select Components

Next, create the Select components within your form using the initial values.

return (
   console.log('Form Submitted:', values)}>
    
      
        {currencyList.map((currency, index) => (
          
            {currency.currency}
          
        ))}
      
    

    
      
        {currencyList.map((currency, index) => (
          
            {currency.currency}
          
        ))}
      
    

    
      
        Submit
      
    
  
);
};

Step 4: Validation and Submission

Ant Design automatically manages validation based on the rules specified in each Form.Item. When the form is submitted, the values are logged to the console, which can be replaced with an API call to update the record in a database.

Common Errors and Troubleshooting

While implementing this setup, you might encounter some common issues:

• Validation Errors: Ensure that each Form.Item has the appropriate rules defined for validation. Missing rules can lead to unvalidated form submissions.
• State Not Updating: If the form does not update with the initial values, double-check the dependency array in the useEffect hook to ensure that it correctly triggers on component mount.
• Incorrect Options: Verify that the currency list is correctly mapped to the <Option> elements, ensuring that each has a unique key and value.

Conclusion

By following the steps outlined in this guide, you can successfully set up a selected value in an Ant Design Select component while maintaining compatibility with ReactJS validation rules. This ensures a smooth user experience when editing pre-existing records within your application. Remember to adjust the logic according to your specific use case, such as integrating with an API or modifying the form structure to fit your data model.

Frequently Asked Questions

How do I set an initial value in Ant Design Select?

Use the setFieldsValue method from the Form instance to set initial values for your Select components.

Why isn't my Select value updating?

Ensure your useEffect correctly includes dependencies and that the form is initialized with the Form instance.

How can I ensure validation rules are applied?

Define rules within each Form.Item to specify required validations such as required fields.