-
Notifications
You must be signed in to change notification settings - Fork 114
/
formik.js
59 lines (55 loc) · 1.58 KB
/
formik.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React from "react";
import { useFormik } from "formik";
import { TextField } from "@material-ui/core";
import Autocomplete, { usePlacesWidget } from "react-google-autocomplete";
export default function Formik() {
const formik = useFormik({
initialValues: {
country: "",
countryAnother: "",
},
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
},
});
const { ref } = usePlacesWidget({
apiKey: process.env.REACT_APP_GOOGLE,
onPlaceSelected: (place) => {
formik.setFieldValue("country", place.formatted_address);
},
});
return (
<div>
Formik state: {JSON.stringify(formik.values)}
<form
onSubmit={formik.handleSubmit}
style={{ display: "flex", flexDirection: "row" }}
>
<TextField
fullWidth
style={{ width: "250px", marginRight: "20px" }}
color="secondary"
variant="outlined"
inputRef={ref}
id="country"
name="country"
placeholder="Country"
onChange={formik.handleChange}
value={formik.values.country}
/>
<Autocomplete
style={{ width: "250px" }}
id="countryAnother"
placeholder="countryAnother"
value={formik.values.countryAnother}
apiKey={process.env.REACT_APP_GOOGLE}
onPlaceSelected={(place) =>
formik.setFieldValue("countryAnother", place.formatted_address)
}
onChange={formik.handleChange}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}