In react app, I have added react-google-autocomplete
and antd
package and using it like
import { Button, Input, Form, Row, Col } from "antd";
....
const getCityFromPlace = (place) => {
let city = "";
place.address_components.forEach((component) => {
if (component.types.includes("locality")) {
city = component.long_name;
}
});
return city;
};
const getStateFromPlace = (place) => {
let state = "";
place.address_components.forEach((component) => {
if (component.types.includes("administrative_area_level_1")) {
state = component.long_name;
}
});
return state;
};
const getZipCodeFromPlace = (place) => {
let zipCode = "";
place.address_components.forEach((component) => {
if (component.types.includes("postal_code")) {
zipCode = component.long_name;
}
});
return zipCode;
};
return (
<>
<div className="mt3">
<Title>Personal Details</Title>
</div>
<div className="flex-center">
<Form
name="basic"
className="mt2"
initialValues={{}}
form={form}
layout="vertical"
size="large"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
style={{
width: 800,
}}
validateMessages={{
required: "Cannot be blank",
}}
>
<Row gutter={[16, 16]}>
<Col span={24}>
<Form.Item
label="Address 1"
name="address1"
size="large"
rules={[
{
required: true,
},
]}
>
<Autocomplete
apiKey={"AIzaSyBLZDsWPlLuThrwkM1dxKZVW4oBdAYJL5A"}
onPlaceSelected={(place) => {
form.setFieldsValue({
address1: place.formatted_address,
city: getCityFromPlace(place),
state: getStateFromPlace(place),
zipcode: getZipCodeFromPlace(place),
});
}}
placeholder="Address 1"
className="ant-autocomplete"
options={{
types: ["(regions)"],
componentRestrictions: { country: "us" },
}}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={24}>
<Form.Item
label="Address 2 (Optional)"
name="address2"
size="large"
>
<Input placeholder="Address 2" />
</Form.Item>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Item
label="City"
name="city"
size="large"
rules={[
{
required: true,
},
]}
>
<Input placeholder="City" />
</Form.Item>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Item
label="State"
name="state"
size="large"
rules={[
{
required: true,
},
]}
>
<Input placeholder="State" />
</Form.Item>
</Col>
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Item
label="Zip Code"
name="zipcode"
size="large"
rules={[
{
required: true,
},
]}
>
<Input placeholder="Zip Code" />
</Form.Item>
</Col>
</Row>
<Row className="flex-center">
<Col xs={24} sm={24} md={8} lg={8} xl={8}>
<Form.Item className="mt2">
<Button type="primary" htmlType="submit" block>
Submit Now
</Button>
</Form.Item>
</Col>
</Row>
</Form>
</div>
</>
);
But on select of address from the autocomplete dropdown getting an warning like
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
at input
at ReactGoogleAutocomplete (http://localhost:3000/static/js/bundle.js:89511:31)
at http://localhost:3000/static/js/bundle.js:22495:5
at StatusProvider (http://localhost:3000/static/js/bundle.js:22365:5)
at div
at div
at div
at http://localhost:3000/static/js/bundle.js:24219:42
at FormItemInput (http://localhost:3000/static/js/bundle.js:22770:5)
at div
at http://localhost:3000/static/js/bundle.js:24410:18
at div
at ItemHolder (http://localhost:3000/static/js/bundle.js:22222:7)
at Field (http://localhost:3000/static/js/bundle.js:46323:90)
at WrapperField (http://localhost:3000/static/js/bundle.js:46862:20)
at InternalFormItem (http://localhost:3000/static/js/bundle.js:22511:5)
at div
at http://localhost:3000/static/js/bundle.js:24219:42
at div
at http://localhost:3000/static/js/bundle.js:24410:18
at form
at Form (http://localhost:3000/static/js/bundle.js:46984:19)
at FormProvider (http://localhost:3000/static/js/bundle.js:47141:31)
at FormProvider
at DisabledContextProvider (http://localhost:3000/static/js/bundle.js:20014:5)
at InternalForm (http://localhost:3000/static/js/bundle.js:22043:62)
at div
at StepThree (http://localhost:3000/static/js/bundle.js:2539:3)
at div
at http://localhost:3000/static/js/bundle.js:24219:42
at div
at http://localhost:3000/static/js/bundle.js:24410:18
at div
at Registration (http://localhost:3000/static/js/bundle.js:3265:88)
at main
at http://localhost:3000/static/js/bundle.js:26939:18
at Content
How can I resolve this warning and why it is coming?
2
Answers
After modifying an initialValues into this
initialValues={{ address1: "" }}
it got resolved.After modifying an initialValues into this initialValues={{ address1: "" }}