Ant Design Input Component not updating value

Question

I try to get value from backend and append the result to the input field value, but it will not be updated.

Currently I use Ant Design Forms and if input field is moved out of Form it works.

import { version, Input, Form } from "antd";

function View() {
      const [LegalName, setLegalName] = useState("");

    useEffect(() => {
        axios
          .get("/afterlogin/OrgFullPictureGet/3", config)
          .then(response => {
            setLegalName(response.data.name);

          })
          .catch(error => {
            // console.log(error.response.data.errors);
          });
      }, []);

      const onFinish = values => {
        //onFinish logic here
        console.log(values);
      };
      return (
        <div className="App">
          <Form name="nest-messages" onFinish={onFinish}>
            <Form.Item
              name={["user", "LegalName"]}
              label={<span>Legal Name</span>}

            >
              <Input
                placeholder={"Your business legal name"}
                value={LegalName}
                onChange={e => setLegalName(e.target.value)}
              />
            </Form.Item>
          </Form>


        </div>
      );
    }

the value does not get appended on the input field

@Pranshu Saxena show your Input component code.

akhtarvahid
– akhtarvahid

2020-03-31 11:21:02 +00:00
Commented Mar 31, 2020 at 11:21 — akhtarvahid
– akhtarvahid, Commented Mar 31, 2020 at 11:21
@VahidAkhtar He is using Ant Design.

Kluddizz
– Kluddizz

2020-03-31 11:23:16 +00:00
Commented Mar 31, 2020 at 11:23 — Kluddizz
– Kluddizz, Commented Mar 31, 2020 at 11:23
did you log response.data.name inside then?

gmoniava
– gmoniava

2020-03-31 11:24:25 +00:00
Commented Mar 31, 2020 at 11:24 — gmoniava
– gmoniava, Commented Mar 31, 2020 at 11:24

Agney · Accepted Answer · 2020-03-31 11:35:11Z

When using name field on the Form.Item, it means that the Form component will handle the value and handleChange on the field from then on. You do not need need to add them. So if you need to add value and handleChange, remove name prop from Form.Item as you see here

But using in most cases, you would want to use them. In that case the alternative is to use the form.setFieldValues to set the required values:

const [form] = Form.useForm();
const [legalName, setLegalName] = useState("");

useEffect(() => {
  axios
    .get("/afterlogin/OrgFullPictureGet/3", config)
    .then(response => {
      form.setFieldsValue({
        legalName: response.data.name
      });
    })
    .catch(error => {
      // console.log(error.response.data.errors);
    });
}, []);

return (
  <Form name="nest-messages" form={form} onFinish={onFinish}>
    <Form.Item name="legalName" label={<span>Legal Name</span>}>
      <Input placeholder={"Your business legal name"} />
    </Form.Item>
  </Form>
);

useForm & setFieldValue Demo docs

Stackblitz Demo

Collectives™ on Stack Overflow

Ant Design Input Component not updating value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related