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

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 ponent: const [recordComponentForm] = Form.useForm();

When I run the application and force this ponent 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 es in on the selectedRecord.IsCurrentRecord object in the same way the Title does. Any advice would be greatly appreciated.

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

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 ponent: const [recordComponentForm] = Form.useForm();

When I run the application and force this ponent 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 es in on the selectedRecord.IsCurrentRecord object in the same way the Title does. Any advice would be greatly appreciated.

• javascript
• reactjs
• antd

3 Answers 3

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 ponent instead. But by using valuePropName="checked", we could get boolean from Checkbox.

This was simply a case of the Form.Items sharing the same name and the child ponent 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.

You can use

<Checkbox name="IsCurrentRecord" checked={Form.useWatch("IsCurrentRecord", form)} />