Iterate over JS object of arrays

Question

I have this object that I'm trying to loop over in a form but really can't get it to work. Here is sample of the object.

        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"
                }
            ]
        }

form implementation

        <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>

Tried many approaches like Object.fromEntries(). forEach I think all the methods I can find example and keep failing, maybe I'm doing something wrong, any help will be appreciated.

Answer 1

 {Object.entries(data).map(([key, val]) =>{
    return val.map(elm =>{
      return (
        <TextField 
          label={elm.label} 
          value={elm.value}  
          name={elm.name}  
        />
      )
    })
  })}

Answer 2

Map should return an element on each iteration. In case you don't want to display return null else return a 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>