I'm tryin to use formik with material-ui Textfield componet with select attr, everytime i change option it gives me this Warning
Material-UI: You have provided an out-of-range value
nullfor the select (name="subIndicatorId") component. Consider providing a value that matches one of the available options or ''. The available values are1,2,3,4,5,55,161,162,163,164,193,233,234,235,236,237,238,239,240,241,242,243,244,245,246,262,263,264,265,266,267,268,271,286,288,289,295,300,303,304,306,307,311,341
alsol i get this Warning when the page render first time
Warning:
valueprop oninputshould not be null. Consider using an empty string to clear the component orundefinedfor uncontrolled components.
here is the code for this
import React, { useState, useEffect } from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import { Col, Container, Row } from "react-bootstrap";
import { useFormik } from "formik";
import * as yup from "yup";
import { axios } from "../Axios/Axios";
import icommodityGroup from "../../assets/images/png/product.png";
import wheatBag from "../../assets/images/png/Wheat Bag.png";
import flag from "../../assets/images/png/flag.png";
import { MenuItem } from "@material-ui/core";
const RetailPrices = () => {
const [genralIndicators, setGenralIndicators] = useState([]);
const [governorates, setGovernorate] = useState([]);
const [subIndicator, setSubIndicator] = useState([]);
const [classification, setClassification] = useState();
const getPopulate = async () => {
const response = await axios
.get("/home/PopulateDropDowns")
.catch((err) => console.log("Error", err)); //handle errors
if (response && response.data) {
console.log(response);
setGenralIndicators(response.data.genralIndicators);
setGovernorate(response.data.governorates);
setClassification(response.data.classification);
}
};
const getSubindicator = async (id) => {
console.log(id);
const response = await axios
.get(`/home/SubIndicator/${id}`)
.catch((err) => console.log("Error", err)); //handle errors
if (response && response.data) {
setSubIndicator(response.data);
}
};
useEffect(() => {
getPopulate();
}, []);
const handleGenralIndicatorsChange = (e) => {
getSubindicator(e.target.value);
};
// Schema for yup
const validationSchema = yup.object({
commodityGroup: yup
.string("أختر المجموعة السلعية")
.required("أختر المجموعة السلعية "),
// commodity: yup.string("أختر السلعة").required("أختر السلعة"),
// city: yup.string("أختر المدينة").required("أختر المدينة"),
});
const formik = useFormik({
initialValues: {
ClassificationId: 1,
GeneralIndicatorId: null,
GovernorateId: null,
subIndicatorId: null,
},
// validationSchema: validationSchema,
onSubmit: async (values) => {
alert(JSON.stringify(values, null, 2));
const response = await axios
.post("/home/PriceSearch", JSON.stringify(values, null, 2))
.catch((err) => console.log("Error", err)); //handle errors;
if (response) {
alert("sucess!");
console.log(response);
}
},
});
return (
<div>
<form onSubmit={formik.handleSubmit}>
<Row>
<Col className="px-0">
<img
className="p-1"
src={icommodityGroup}
alt="icon_1"
style={{
borderRadius: "6px",
boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",
}}
/>
<TextField
style={{ width: "200px" }}
className="px-2 my-2"
variant="outlined"
name="GeneralIndicatorId"
id="المجموعة السلعية"
select
label="المجموعة السلعية"
value={formik.values.GeneralIndicatorId}
onChange={(e) => {
formik.handleChange(e);
handleGenralIndicatorsChange(e);
}}
error={
formik.touched.genralIndicators &&
Boolean(formik.errors.genralIndicators)
}
helperText={
formik.touched.genralIndicators &&
formik.errors.genralIndicators
}
>
{genralIndicators.map((option) => (
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
))}
</TextField>
</Col>
<Col className="px-0">
<img
className="p-1"
src={wheatBag}
alt="icon_1"
style={{
borderRadius: "6px",
boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",
}}
/>
<TextField
style={{ width: "200px" }}
className="px-2 my-2"
variant="outlined"
name="subIndicatorId"
id="السلعة"
select
label="السلعة"
value={formik.values.subIndicatorId}
onChange={formik.handleChange}
error={
formik.touched.subIndicator &&
Boolean(formik.errors.subIndicator)
}
helperText={
formik.touched.subIndicator && formik.errors.subIndicator
}
>
{subIndicator.map((option) => (
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
))}
</TextField>
</Col>
<Col className="px-0">
<img
className="p-1"
src={flag}
alt="icon_1"
style={{
borderRadius: "6px",
boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",
}}
/>
<TextField
style={{ width: "200px" }}
className="px-2 my-2"
variant="outlined"
name="GovernorateId"
id="المحافظة"
select
label="المحافظة"
value={formik.values.GovernorateId}
onChange={formik.handleChange}
error={
formik.touched.governorates &&
Boolean(formik.errors.governorates)
}
helperText={
formik.touched.governorates && formik.errors.governorates
}
>
{governorates.map((option) => (
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
))}
</TextField>
</Col>
<Col>
<Button
className="p-3 my-2 "
size="large"
variant="contained"
type="submit"
style={{
color: "#fff",
backgroundColor: "var(--main-green)",
width: "200px",
}}
>
إرسال
</Button>
</Col>
</Row>
</form>
</div>
);
};
export default RetailPrices;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>it works fine and return response, but i want to handle these two warnings