React Props: не удается получить доступ к объектам API GitHub (я не настолько сообразительный)

Question

Я пытаюсь добавить карточки, которые показывают имя, аватар, местоположение и биографию пользователей Github. Мне удалось получить изображение аватара, имя, но всякий раз, когда я добавляю местоположение в список, ничего не происходит, даже если оно определено. Я потратил часы на поиски, пробуя разные методы, но, кажется, не могу понять причину. Любая помощь будет очень признательна. Вот фрагмент кода, а полный его можно найти на Github здесь: https://github.com/aymanxdev/react-github-users-finder

import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";


const useStyles = makeStyles({

  root: {  
    maxWidth: 345
  },
  media: {
     
    height: 220
  }
});
function UserItem (props){
    const classes = useStyles();

    const { avatar_url, login, location } = props.user;

    return (
     
    <Card className={classes.root}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image={avatar_url}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {login}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
          {location}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button href={`/users/${login}`} variant="outlined" color="primary">
        Read More
        </Button>
      </CardActions>
    </Card>
    )
}

export default UserItem ```

Answer 1

Когда вы нажимаете Github API, он отвечает примерно следующим образом.

"items": [
{
  "login": "john",
  "id": 1668,
  "node_id": "MDQ6VXNlcjE2Njg=",
  "avatar_url": "https://avatars1.githubusercontent.com/u/1668?v=4",
  "gravatar_id": "",
  "url": "https://api.github.com/users/john",
  "html_url": "https://github.com/john",
  "followers_url": "https://api.github.com/users/john/followers",
  "following_url": "https://api.github.com/users/john/following{/other_user}",
  "gists_url": "https://api.github.com/users/john/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/john/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/john/subscriptions",
  "organizations_url": "https://api.github.com/users/john/orgs",
  "repos_url": "https://api.github.com/users/john/repos",
  "events_url": "https://api.github.com/users/john/events{/privacy}",
  "received_events_url": "https://api.github.com/users/john/received_events",
  "type": "User",
  "site_admin": false,
  "score": 1.0
}]

Как видите, свойство location отсутствует в ответе от API, поэтому вы не можете получить к нему доступ.

API GitHub:

https://api.github.com/search/users?q="john"