Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import ReactDOM from "react-dom";
- import React, { useState } from "react";
- import { Grid, TextField, Button } from "@material-ui/core";
- import { Formik } from "formik";
- import * as Yup from "yup";
- import Select from "react-select";
- import "./styles.css";
- function App() {
- const [selectedYear, setSelectedYear] = useState("");
- const testSchema = Yup.object().shape({
- name: Yup.string().required("Enter Name"),
- year: Yup.string().required("Select Year")
- });
- const initialValues = {
- name: "",
- year: ""
- };
- const handleYearChange = (selectedYear, values) => {
- values.year = selectedYear.value;
- console.log(selectedYear);
- setSelectedYear(selectedYear);
- };
- const yearOptions = [
- { value: "1960", label: "1960" },
- { value: "1961", label: "1961" },
- { value: "1962", label: "1962" },
- { value: "1963", label: "1963" },
- { value: "1964", label: "1964" },
- { value: "1965", label: "1965" }
- ];
- return (
- <Formik validationSchema={testSchema} initialValues={initialValues}>
- {({
- handleChange,
- handleBlur,
- values,
- errors,
- touched,
- handleSubmit,
- setFieldTouched
- }) => {
- return (
- <>
- <Grid container spacing={2}>
- <Grid item md={12} xs={12}>
- <TextField
- label="Name"
- name="name"
- margin="normal"
- variant="outlined"
- onChange={handleChange("name")}
- style={{ width: "100%", zIndex: 0 }}
- value={values.name}
- onBlur={() => {
- console.log("name");
- }}
- />
- {errors.name}
- </Grid>
- <Grid item md={6} xs={12}>
- <Select
- placeholder="Year"
- value={selectedYear}
- onChange={selectedOption => {
- handleYearChange(selectedOption);
- // handleYearChange(selectedOption, values);
- // values.year = selectedOption.value;
- console.log("values", values.year);
- handleChange("year");
- }}
- isSearchable={true}
- options={yearOptions}
- name="year"
- isLoading={false}
- loadingMessage={() => "Fetching year"}
- noOptionsMessage={() => "Year appears here"}
- />
- {errors.year}
- </Grid>
- <Grid
- item
- md={4}
- style={{ marginTop: "24px", marginBottom: "10px" }}
- xs={12}
- >
- <Button onClick={handleSubmit}>Save</Button>
- </Grid>
- </Grid>
- </>
- );
- }}
- </Formik>
- );
- }
- const rootElement = document.getElementById("root");
- ReactDOM.render(<App />, rootElement);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement