Cannot read properties of null React api json fetch

Question

I'm retrieving data from an API using fetch which I'm storing within the variable 'data'

This is then being mapped to 'character' which I'm adding to my react component

</Typography>
    <Grid container spacing={3}>
      {data.map((character) => (
        <Grid item xs={12} sm={4} key={character.id}>
          <Card className={classes.card}>
            <CardMedia
              className={classes.media}
              image={character.image_preview_url}
            />

            <CardContent>
              <Typography color="primary" variant="h5">
                {character.name}
              </Typography>

              <Typography color="textSecondary" variant="subtitle2">
              {character.owner.user.username}
              </Typography>

I'm getting the issue on line {character.owner.user.username} because not every record in the returned data will contain a value for this item. How can I set the default to show as "No User" for when the value is returned as NULL ?

Max Castro · Accepted Answer · 2021-10-26 11:08:21Z

2

You can use ternary operator.

It's something like this:

<Typography color="textSecondary" variant="subtitle2">
  { character.owner.user.username ? character.owner.user.username : 'No User'}
</Typography>

answered Oct 26, 2021 at 11:08

Max Castro

463 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sylvain · Accepted Answer · 2021-10-26 11:09:13Z

1

you could write something like this:

{character.owner.user.username ? character.owner.user.username : "No user"}

answered Oct 26, 2021 at 11:09

Sylvain

5392 gold badges8 silver badges17 bronze badges

Collectives™ on Stack Overflow

Cannot read properties of null React api json fetch

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related