Github API Not displaying users

Question

Having trouble displaying a list of Github usernames and profile pics. I'm using https://api.github.com/users to fetch the data from the API. I haven't started working on the profile links yet. Here's what's being displayed

Here's my App.js:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';

function App() {
  return (
    <Router>
      <div className='flex flex-col justify-between h-screen'>
          <Navbar />
          <main className='container mx-auto px-3 pb-12'>
            <Routes>
              <Route path='/' element={< Home />} />
              <Route path='/about' element={< About />} />
              <Route path='/notfound' element={< NotFound />} />
              <Route path='/*' element={< NotFound />} />
            </Routes>
          </main>

          <Footer />
        </div>
    </Router>
  );
}

export default App;

Here's UserResults.jsx:

import {useEffect, useState} from 'react'
import Spinner from '../layout/Spinner'
import UserItem from './UserItem'

function UserResults() {
    const [users, setUsers] = useState([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        fetchUsers()
    }, [users])

const fetchUsers = async () => {
    const response = await fetch(`https://api.github.com/users`)
    const data = await response.json()
   
    setUsers(data)
    setLoading(false)
}
  if (!loading) {
  return (
    <div className='grid grid-cols-1 gap-8 xl:grid-cols-4
        lg:grid-cols-3 md:grid-cols-2'>
        {users.map((user) => (
            <UserItem key={user.id} user={user} />
        ))}
    </div>
  )
  } else {
      return <h3><Spinner /></h3>
  }
}

export default UserResults

UserItem.jsx which displays the user info:

import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'

function UserItem({users: login, avatar_url}) {
  return (
    <div className='card shdow-md compact bg-base-100 '>
      <div className='flex-row items-center space-x-4 card-body'>
        <div>
          <div className='avatar'>
            <div className='rounded-full shadow w-14 h-14'>
              <img src={avatar_url} alt='profile pic'></img>
            </div>
          </div>
        </div>
        <div>
          <h2 className='card-title'>{login}</h2>
          <Link className='text-base-content text-opacity-40' to={`/users/${login}`}>
            Visit Profile
          </Link>
        </div>
      </div>
    </div>
  )
}

UserItem.propTypes = {
  users: PropTypes.object.isRequired,
}

export default UserItem

Feel like I'm missing something with the way I reference the API. Thank you in advance!

Answer 1

The UserItem component is being called as:

<UserItem key={user.id} user={user} />

You should define it as follows:

function UserItem({key, user}) {
    // here you can use user.avatar_url and any other user related key