what my task is I am using TextFiled according to the Array but the issue is not able to change this all value dynamically I am aware I can use the index to this task based on ternary conditions.
const TextField = () => {
return (
<>
<Card sx={{ mt: 4 }} variant="outlined">
<CardContent>
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.fill("").map((data, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<TextField
id="outlined-basic"
label={data}
name={index === 0}
size="small"
variant="outlined"
value={data}
/>
</Grid>
))}
</Grid>
</CardContent>
</Card>
</>
);
};
import React from "react";
import {
Grid,
Card,
CardContent,
Box,
CardActions,
TextField,
Button
} from "@mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";
const validationSchema = Yup.object().shape({
organisationName: Yup.string().required("Required!"),
organisationID: Yup.string().required("Required!"),
manager: Yup.string().required("Required!")
});
const AddNewTeam = () => {
const teamForm = useFormik({
initialValues: {
organisationName: "",
organisationID: "",
manager: "",
branch: "",
product: ""
},
validationSchema,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
}
});
console.log(teamForm);
return (
<>
<Card sx={{ mt: 4 }} variant="outlined">
<CardContent>
<Grid container spacing={{ xs: 2, md: 3 }}>
{Array.from([
"organisationName",
"organisationID",
"manager",
"branch",
"product"
]).map((data, index) => (
<Grid item xs={12} sm={6} md={3} key={index}>
<TextField
id="outlined-basic"
label={data}
name="organisationName"
size="small"
variant="outlined"
value={teamForm.values.data}
onBlur={teamForm.handleBlur}
onChange={teamForm.handleChange.bind(this)}
error={Boolean(teamForm.errors.data)}
helperText={teamForm.errors.data}
/>
</Grid>
))}
</Grid>
</CardContent>
<CardActions>
<Box
display="flex"
flexGrow={1}
alignItems="center"
justifyContent="flex-end"
flexDirection="row"
>
<Button
variant="contained"
color="primary"
onClick={teamForm.handleSubmit}
>
Add team
</Button>
</Box>
</CardActions>
</Card>
</>
);
};
export default AddNewTeam;