Items don't show from array-CodePudding

I'm using React. I try to map an array with object and to output the name of each object from array {1: Array(8), 2: Array(1)}

Object.entries(data).map(([key, value]) => (
      <Grid item key={cuid()} lg={4} sm={6} xs={12}>
          <Typography variant="subtitle1">{key}</Typography>
          {value.forEach((item) => {
                
                <Typography variant="subtitle1">{item.name}</Typography>
          })}
      </Grid>
      
    ))

The value is an Array (8) and Array (1):

Array(8)

0: {id: 1, name: 'a'}
1: {id: 2, name: 'b'}
2: {id: 3, name: 'c'}
3: {id: 4, name: 'd'}
4: {id: 5, name: 'e'}
5: {id: 6, name: 'f'}
6: {id: 7, name: 'g'}
7: {id: 8, name: 'h'}

Array (1)

0: {id: 28, name:'z'}

The item.name don't show on my webpage. What should I correct?

CodePudding user response：

You can think of JSX as "always returning something". You are mapping over value, and since forEach does not return anything, you are not seeing anything. Use map instead of forEach

{value.map((item) => {
 return <Typography variant="subtitle1">{item.name}</Typography>
 }