score:1

Accepted answer

setup a loading state and don't return unless loading is complete and that should fix it.

import react, { useeffect, usestate } from "react";
import { form, button, input } from "antd";

function app() {
  const [data, setdata] = usestate([{}]);
  const [loading, setloading] = usestate(true);
  const [form] = form.useform();
  const onfinish = (values) => {
    console.log("received values of form: ", values);
  };

  useeffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1/comments")
      .then((res) => res.json())
      .then((data) => {
        setdata(data);
        setloading(false);
        console.log(data);
      })
      .catch((err) => {
        setloading(false);
      });
  }, []);

  if (!loading) {
    return (
      <div>
        {" "}
        <form form={form} onfinish={onfinish}>
          <form.item
            classname="form-label"
            name="firstname"
            initialvalue={data.length ? data[0].name : "email"}
            label="first name"
          >
            <input
              maxlength={10}
              style={{ minwidth: 200, maxwidth: 500 }}
              placeholder="enter first name"
            />
          </form.item>
          <form.item
            classname="form-label"
            initialvalue={data.length ? data[0].name : "email"}
            name="email"
            label="email"
          >
            <input
              maxlength={10}
              style={{ minwidth: 200, maxwidth: 500 }}
              placeholder="enter middle name"
            />
          </form.item>
          <form.item>
            <div classname="btn-primary-create-employee">
              <button type="primary" htmltype="submit">
                save
              </button>
            </div>
          </form.item>
        </form>
      </div>
    );
  }
  return null;
}

export default app;


Related Query

More Query from same tag