ant design - Update checked value of a checkbox inside a Form.Item using Form.setFieldsValue

Question

I have a React Form component that receives a state object. The Form contains a couple of Form.Item components, one antd Input & one antd Checkbox. I have the following code in my Form component:

const RecordsForm = ({ selectedRecord, recordComponentForm }) => {
  useEffect(() => {
    debugger;
    recordComponentForm.setFieldsValue({
      Title: selectedRecord ? selectedRecord.Title : null,
      IsCurrentRecord: selectedRecord ? selectedRecord.IsCurrentRecord : true,
    });
  }, [recordComponentForm, selectedRecord]);

  return (
    <Form
      name="seasonForm"
      autoComplete="off"
      layout={"inline"}
      form={recordComponentForm}
    >
      <Form.Item
        label="Title"
        name="Title"
        rules={[{ required: true, message: "Add a Title" }]}
      >
        <Input
          name="Title"
          placeholder="Season Title"
        />
      </Form.Item>

      <Form.Item
        label="Is Active Record"
        name="IsCurrentRecord"
        valuePropName="checked"
      >
        <Checkbox name="IsCurrentRecord" />
      </Form.Item>
    </Form>
  );
};

export default RecordsForm;

where the supplied prop recordComponentForm is instantiated in the parent component: const [recordComponentForm] = Form.useForm();

When I run the application and force this component to reload with a new selectedRecord , I want the Form.Item Input value to change to the Title from the object and the Checkbox to reflect the IsCurrentRecord boolean value of the object. The object passed in looks like this:

The Title Input value changes to show the Title of the object, however the checkbox remains unchanged:

I would like the checkbox to change it's checked value depending on what comes in on the selectedRecord.IsCurrentRecord object in the same way the Title does. Any advice would be greatly appreciated.

Answer 1

This was simply a case of the Form.Items sharing the same name and the child component it contains. Once I renamed the Form.Item for the Checkbox to something like IsCurrentRecord_FI and referred to it as such, it started working.

Answer 2

maybe.. just simply remove name from Checkbox.

      <Form.Item
        label="Is Active Record"
        name="IsCurrentRecord"
        valuePropName="checked"
      >
        <Checkbox />
      </Form.Item>

Checkbox usually return a value of choices (not boolean), so you perhaps should use Switch component instead. But by using valuePropName="checked" , we could get boolean from Checkbox.