defaultValue of Input not working correctly on ant design

Question

I am using ant design on my project. I get data from redux store with useEffect like this;

const settingsRedux = useSelector(state => state.SETTINGS)

after that I use this data for defaultValue of Input

<Input 
  defaultValue={settingsRedux.background_image} 
  onChange={e => dispatch({
    type: BACKGROUND_IMAGE, 
    payload: e.target.value
  })}
/>

It works actually. But gives console error.

Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.

Alltime

Answer 1

You may set initialValues at Form component as object.

<Form
  ...
  initialValues={{
    ["name"]: settingsRedux.background_image 
  }}
>
  ...

<Input 
  name="name"
  onChange={e => dispatch({
    type: BACKGROUND_IMAGE, 
    payload: e.target.value
  })}
/>

checkout here: https://ant.design/components/form/

Zymometer

Answer 2

You may want to use value prop instead of defaultValue. The default value is used when you want to set an initial value in an uncontrolled input. Currently, you have made your Component Controlled so you may have to use value prop.

Read more about this here: https://reactjs.org/docs/forms.html#controlled-components

Bourne

Yes. But if use value instead of defaultValue input shows empty when first opened. – Alltime

I cant tell really why that might be happening without looking at the code, but it should work as expected. If you pass the correct value it should have shown the text in input. You can try creating a Codesandbox link for the issue, I can take a look – Bourne

Answer 3

The correct thing is that you use fields. your code should look like.

<Form
  name="form_name"
  fields={[
    {
      name: ["fieldName"],
      value: settingsRedux.background_image,
    },
  ]}
>
  <Form.Item name="fieldName">
    <Input
      onChange={(e) =>
        dispatch({
          type: BACKGROUND_IMAGE,
          payload: e.target.value,
        })
      }
    />
  </Form.Item>
</Form>;

you can see more examples in the documentation https://ant.design/components/form/

Kenyon

Answer 4

I had this problem when creating data-grid, and couldn't see the defaultValue for the first input. If you want to use uncontrolled input you can use your custom input which is controlled and set a callback function to get results like from uncontrolled input. In my case, I used onBlur action to get changed value.

const CusomeInput = ({ defaultValue, onInputBlur }) => {
  const [inputState, setInputState] = useState("");
  useEffect(() => {
    setInputState(defaultValue);
  }, [defaultValue]);
  return <Input value={inputState} onChange={(e) => setInputState(e.target.value)} onBlur={onInputBlur} />;
};

Busiek

Answer 5

You can use this, it works for me :

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

  React.useEffect(() => {
    form.setFieldsValue({
      username: 'Bamboo',
    });
  }, []);

  return (
    <Form form={form}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
};

Inanity

Answer 6

you can either achieve you target by putting a ref to the Form

const formRef = React.useRef(null)

useeffect(()=>{
formRef?.current?.setFieldsValue({
  name: fieldsToPopulate?.name,
  email: fieldsToPopulate?.email,
...
})
},[fieldsToPopulate])

return(
<Form onfinish={handleFinish ref={formRef}>
<Form.Item name="name" rules={[...]}>
<Input {...props} />
<Form.Item name="email" rules={[...]}>
<Input {...props} />
</Form.Item>
...
</Form>
)

Saucepan

Answer 7

 const [form] = Form.useForm();

 useEffect(() => {
 if (data && data.data) {
  form.setFieldsValue({
    estimatetitle: data.data.estimatetitle,
    invoicetitle: data.data.invoicetitle,
  });
}
}, [data, form]);

<Form
form={form}
name={"Customize"}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
>
//rest of form here
</Form>

In my case this worked perfectly especially when data is not available when the components loads, say you are fetching it from some api

Archegonium

Answer 8

Looking at your code, I assume you are not using Ant Design form.

Since it is controlled field, You need to use value prop instead of defaultValue prop. If you see empty field, your redux initial state for SETTINGS may be empty '' string..

Set your settings initial value in redux to appropriate value.

Matherly

Answer 9

if you will use defaultValue props you need to convert your value to string first.

example:

const defValue = 123;

<Input defaultValue={defValue.toString()} />

It works it my end.

Kirima