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;
Source: stackoverflow.com
Related Query
- How to use an API response as initial value for input in ReactJS
- How to extract text input value and pass down that value down to a child component as a prop to use for fetching third part api data in React?
- How to use a ReactJS component as content string for Google Maps API Infowindow
- How do I use the error prop and css for Input API of Material UI with context
- How to generate an array for each input value from textBox in reactJs
- ReactJS and jest: how to use a mock value for element.offsetWidth?
- How do I set an initial value for a text input when using a custom hook in react?
- How to prop an input value into a parameter for an API call
- How to use ternary operation in reactjs when state contain a response from api call
- How to use map on json response returned by a REST API with ReactJs
- how to store the API response value to useReducer initial state
- I want to use useEffect once i submit a form and take the value from input field and assign it to a api url and get response
- How to get input text value on click in ReactJS
- ReactJS - How can I set a value for textfield from material-ui?
- React.js - How to set a default value for input date type
- How to cache API response and use it later in react & redux?
- How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?
- How to use getStaticProps in _app.js for showing data fetched from api in every pages in Next.js
- How to use a proxy for a link with reactjs
- How to dynamically update the value for any input field with one event handler function, using hooks
- how to use a type for the response from axios.get
- How should I use "redux-thunk" for Async Initial state ? (react/redux)
- Use different key for searching instead of value or label in react-select in reactJS
- how can use hsl instead of rgb for scss global declaration javascript api
- How to set initial state value for useState Hook in jest and enzyme?
- How do I set the result of an API call as the default value for a Recoil atom?
- How to use devise-jwt with devise for signin, signup and signout in rails api
- How to implement remember me functionality for authentication in ReactJS when i only receive jwt token from backend api
- ReactJS How do I use state hooks for a list of text changing buttons with a timeout?
- React useState value in Context API always use initial value instead of updated value
More Query from same tag
- Need to add quantity on my react state object
- React setState only pushing last item to array
- How do I loop though an array in a `this.state` object?
- dispatching an action from componentDidMount
- Does anyone understand why my Heroku build might be failing?
- Child element click triggering parent element as well - Reactjs
- Button click event not getting fired when arguments are passed
- ReactJS - Warning: A component is changing an uncontrolled input of type text to be controlled - edit function
- Does it hurt performance to use the react redux hooks in a list?
- Get the drop down items in the console in React js
- How to add a label to a border in mui?
- Warning: Can't perform a React state update on an unmounted component. useEffect cleanup function
- CORS issue using create-react-app when trying to use an image from another URL
- Complex array filtering conditions
- Rendering React component inside Template Literals using Ref
- Can i use dispatch like setState in this problem?
- Shorter way to push child props data to parent
- How do i use form.setFieldsValue() for form items inside an input group in antd
- Calling two functions with onClick event
- Element type is invalid: expected a string, using JSX to define a component
- How to share a variable between epics that are in different files?
- How to pass dynamic as well as static parameters {hybrid field variables and functions} in React function using map?
- How to properly pull a create-react-app repository and build (currently has error) - (Git)
- Cant access action in children component
- React context - 'contextType' is not defined
- How to "scale" all the elements in Material-UI?
- populating the neccessary data in react.js
- How to set initial values on a DateField redux-form?
- Unable use mock servise worker in react testing library
- I get the error 'TypeError: Cannot read property 'map' of undefined' when submitting a empty search request