User profile not appearing from github API

Question

I am not receiving any errors, but my profile is not showing up in my application.

import React, { useState, useEffect } from 'react';

const url = 'https://api.github.com/users/defunkt';

const Main = () => {
  const [users, setUsers] = useState([]);

  const getUsers = async () => {
    const response = await fetch(url);
    const usersData = await response.json();
    setUsers(usersData);
  };

  useEffect(() => {
    console.log("useEffect called");

    getUsers();
  }, []);

  return (
    <div>
      <h3>Github Users</h3>
      <ul className='users'>
        {Array.isArray(users) && users.map((users) => {
          const { id, login, avatar_url, html_url } = users;
          return (
            <li key={id}>
              <img src={avatar_url} alt={login} />
              <div>
                <h4>{login}</h4>
                <a href={html_url}>profile</a>
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default Main;

I just need a little widget that will take me to the git hub account. I know the API working I just can't pass it on to the use effect function.

Answer 1

I found that your api just sends an object instead of an array. So, Array.isArray(users) returns false.

{
"login": "defunkt",
"id": 2,
"node_id": "MDQ6VXNlcjI=",
"avatar_url": "https://avatars.githubusercontent.com/u/2?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/defunkt",
"html_url": "https://github.com/defunkt",
"followers_url": "https://api.github.com/users/defunkt/followers",
"following_url": "https://api.github.com/users/defunkt/following{/other_user}",
"gists_url": "https://api.github.com/users/defunkt/gists{/gist_id}",
"starred_url": "https://api.github.com/users/defunkt/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/defunkt/subscriptions",
"organizations_url": "https://api.github.com/users/defunkt/orgs",
"repos_url": "https://api.github.com/users/defunkt/repos",
"events_url": "https://api.github.com/users/defunkt/events{/privacy}",
"received_events_url": "https://api.github.com/users/defunkt/received_events",
"type": "User",
"site_admin": false,
"name": "Chris Wanstrath",
"company": null,
"blog": "http://chriswanstrath.com/",
"location": null,
"email": null,
"hireable": null,
"bio": "",
"twitter_username": null,
"public_repos": 107,
"public_gists": 273,
"followers": 21687,
"following": 214,
"created_at": "2007-10-20T05:24:19Z",
"updated_at": "2023-04-09T21:37:56Z"
}