Antd Select not setting initial value

Question

I have an issue in setting the initial value in antd Select

const options=[{name:'john',id:1},{name:'jack',id:2},{name:'jill',id:3}]
   <Form initialValues={{user:3}}>
    <Form.Item name="user" label="Select user">
        <Select value="3">
        {options.map((user,index)=><Option key={index} value={user.id}>{user.name}</Option>)}
        </Select>
    </Form.Item>
   </Form>

It's not selecting the initial value. Any idea in this. is this a correct way of implementing it, please help

Answer 1

The below is a simple demo of Select Component in Antd Form I am wondering whether the options come from the store or other components? So the form does not get the initial values once the form is mounted. If it comes from other source, you need to subscribe the initial values if it changes to reset the antd form like

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Checkbox, Select } from 'antd';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
// useEffect(() => {
  //   form.resetFields()
  //   form.setFieldsValue({
  //     productName: productName
  //   })
  // }, [initialValues]);
const userNameOptions = [{name:'john',id:1},{name:'jack',id:2},{name:'jill',id:3}]
const Demo = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
        username: 3
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Select value='3'>
          {userNameOptions.map((item, index) => (
            <Select.Option key={index} value={item.id}>
              {item.name}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));

Answer 2

I have this working in ant design 4. I pass the initial values in props, the value being userBuildingName, if the prop exists I set an defaultValue:

defaultValue={!!props.userBuildingName && props.userBuildingName}

Entire select box code here:

 <Form.Item name="claimId" rules={[{ required: true, message: "Please enter the building to manage" }]}>
                        <Select placeholder="Please enter the building to manage"
                            defaultValue={!!props.userBuildingName && props.userBuildingName}
                            disabled={!!props.modalCRUD.includes("View")}
                        >
                            {!!props.userBuildings && props.userBuildings.map((building) => <Select.Option key={building.id} value={building.id}>{building.name}</Select.Option>)}
                        </Select>
                    </Form.Item>