Home > Software engineering >  How to map an object to Material-ui output
How to map an object to Material-ui output

Time:09-17

I have this array

 statusColorsArr = 
        {"id":"1","name":"NotReady","colourR":48,"colourG":183,"colourB":0,},
        {"id":"2","name":"Ready","colourR":209,"colourG":22,"colourB":0,}

and I want to output it as a list item with

 {statusColorsArr.map((id, name) =>(
      <MenuItem key={id} value={name}  className ={classesF.A}>
          <Checkbox className ={classesF.D} />
          <ListItemText primary={id}/>
          <ListItemText primary={name}/>
          <ListItemIcon color />   
      </MenuItem>
))}

How to do it is the question. thx

Edit:

statusColorsArr = [           
   {"id":"1","name":"NotReady","colourR":48,"colourG":183,"colourB":0,},            
   {"id":"2","name":"Ready","colourR":209,"colourG":22,"colourB":0,}
]

CodePudding user response:

Destructure each object by wrapping id and name in parantheses.

{statusColorsArr.map(({ id, name }) => (
  <MenuItem key={id} value={name} className={classesF.A}>
    <Checkbox className={classesF.D} />
    <ListItemText primary={id}/>
    <ListItemText primary={name}/>
    <ListItemIcon color />   
  </MenuItem>
))}
  • Related