Tengo este objeto que estoy tratando de recorrer en un formulario, pero realmente no puedo hacer que funcione. Aquí hay una muestra del objeto.
const data = { "Social Security": [ { label: "Deduction Type", value: "Social Security", name: "SocialSecurity" }, { label: "Employer Rate", value: "12.4%", name: "SocialEmployer" }, { label: "Employee Rate", value: "6.2%", name: "SocialEmployee" } ], "Medicare": [ { label: "Deduction Type", value: "Medicare", name: "Medicare" }, { label: "Employer Rate", value: "1.45%", name: "MedicareEmployer" }, { label: "Employee Rate", value: "2.9%", name: "MedicareEmployee" } ] }implementación de formularios
<Formik> {({ values, isSubmitting, resetForm, setFieldValue }) => ( <Form id="payrollSettingsForm" > <Grid container className={classes.border}> <Grid item xs={12} md={4}> {Object.entries(data).map(arr =>{ Array.isArray(arr) && arr.map(elm =>{ return (<TextField label={elm.label} value={elm.value} name={elm.name} />) }) })} </Grid> </Grid> ...rest of the form </Form> </Formik>Probé muchos enfoques como Object.fromEntries(). forEach Creo que todos los métodos que puedo encontrar son ejemplos y siguen fallando, tal vez estoy haciendo algo mal, cualquier ayuda será apreciada.
{Object.entries(data).map(([key, val]) =>{ return val.map(elm =>{ return ( <TextField label={elm.label} value={elm.value} name={elm.name} /> ) }) })}El mapa debe devolver un elemento en cada iteración. En caso de que no desee mostrar return null , de lo contrario, devuelva un react node .
<Grid item xs={12} md={4}> {Object.entries(data).map(arr => { Array.isArray(arr) ? arr.map(elm => { return (<TextField label={elm.label} value={elm.value} name={elm.name} />) }) : null })} </Grid>