React - Ant Design Form-Item name props broke Select value

Question

I m using antD and if I use select component inside of form item and if this form item has name as props I can not set value to my select component while page was rendering.

Just make it clear what I tried to say, I prepared a example and you can copy and paste it to the codesandbox or etc.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import 'antd/dist/antd.css';
    import './index.css';
    import { Form, Input, Button, Select } from 'antd';
    const { Option } = Select;
    
    
    export const Demo =()=> {
      let formRef = React.createRef();
        return (
          <Form ref={formRef} name="control-ref">   
            <Form.Item 
              label="Gender"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select value="male">
                <Option value="male">male</Option>
                <Option value="female">female</Option>
                <Option value="other">other</Option>
              </Select>
            </Form.Item>       
          </Form>
        );
    }
    
    ReactDOM.render(<Demo />, document.getElementById('container'));

If you try to give name props to form item in this example your select component's initial value will not be set. More over using hooks not solved my problem.

Answer 1

I do not fully understand your question, but as far as I do, I'll try to help.

You can try useRef.

import React,{useRef, useEffect} from 'react';

 export const Demo =()=> {
     var formRef = useRef();

      useEffect(() => {
      formRef.current.setFieldsValue({
     select:"male"
     })
  });
      
    <Form ref={formRef} name="control-ref">   
                <Form.Item 
                  label="Gender"
                   name="select"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Select>
                    <Option value="male">male</Option>
                    <Option value="female">female</Option>
                    <Option value="other">other</Option>
                  </Select>
                </Form.Item>       
    </Form>
);}

Do not forget to give the name of the relevant Form.Item.