cuál es mi tarea. Estoy usando TextFiled de acuerdo con Array, pero el problema no puede cambiar todo este valor dinámicamente. Soy consciente de que puedo usar el índice para esta tarea en función de las condiciones ternarias.
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;