How to display specific keys of json data in React

Question

I have this Json data:

[        
  {
   "serial_number": "test",
   "added_at": "2021-02-05T18:58:43.382943Z",
   "ser_mod": [
      {
        "added_at": "2021-02-06T02:15:51.513446Z",
        "module": "test",
        "time": "0.05"
      },
      {
        "added_at": "2021-02-09T00:44:46.254122Z",
        "module": "test",
        "time": "2.23"
      },
      {
        "added_at": "2021-02-09T00:44:58.010508Z",
        "module": "test",
        "time": "2.23"
      }
    ]
  },
  {
    "serial_number": "test2",
    "added_at": "2021-02-09T10:04:38.394083Z",
    "ser_mod": [
      {
        "added_at": "2021-02-09T10:05:43.605226Z",
        "module": "test2",
        "time": "2.23"
      }
    ]
  }
]

I would like to display the serial_number and the latest time

<React.Fragment>
  <Container maxWidth='md' component='main'>
    <Grid container spacing={5} alignItems='flex-end'>
      {modules.map((module) => {
        return (
          <Grid item key={module.serial_number} xs={12} md={12}>
            <Card className={classes.card}>
              <CardContent className={classes.cardContent}>
                <Typography
                  gutterBottom
                  variant='h6'
                  component='h1'
                  className={classes.postTitle}
                >
                  Serial Number: {module.serial_number}
                </Typography>
                <div className={classes.postText}>
                  <Typography component='p' color='textPrimary' />
                  <Typography variant='p' color='textSecondary'>
                    Time: {module.ser_mod.time}
                  </Typography>
                </div>
              </CardContent>
            </Card>
          </Grid>
        );
      })}
    </Grid>
  </Container>
</React.Fragment>;

But I can't make this work; the time does not display as expected. This is what I'm getting:

What should I do to solve this ?

Answer 1

You need to pick only the last ser_mod element.

Change from:

<Typography variant="p" color="textSecondary">
  Time: {module.ser_mod.time}
</Typography>

To:

<Typography variant="p" color="textSecondary">
  Time: {module.ser_mod[ module.ser_mod.length - 1].time}
</Typography>

Some extra advices

• Simplify modules.map callback without return:

{modules.map((module) => (
   /* ... */
)}

• Destructure module to optimize and clarify:

{modules.map(({serial_number, ser_mod}) => (
   <Grid item key={serial_number} xs={12} md={12}>
   /* ... */
   </Grid>
)}