React Typescript: TypeError: Cannot read properties of undefined (reading 'map')

Question

I am trying to map a card component with user data which I get from the jsonplaceholder using axios. However, when I tried, it returns with "TypeError: Cannot read properties of undefined (reading 'map')". I tried all the solutions on the web without success. Please help!

Here is the code that declared 'users';

export const useAllUsers = () => {
  const [users, setUsers] = useState<Array<User>>()
  const getUsers = useCallback(() => {
    axios
      .get<Array<User>>('https://jsonplaceholder.typicode.com/users')
      .then(res => {
        setUsers(res.data)})
         .catch(() => {
           return <MessageError />
         })
         .finally(()=>{
           setLoading(false)
         })
  }, [])
  return { getUsers, loading, users }
}

Then, I tried to map the 'users' get the all the user data as below:

export const UserManagement: VFC = memo(() => {
  const { getUsers, users, loading } = useAllUsers()
  useEffect(() => getUsers(), [])

  return (
    <>
      {loading ? (
        <div className=' flex justify-center items-center'>
          <div className='animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900'></div>
        </div>
      ) : (
        <div
          className='grid 
        grid-cols-2 mb-16 md:grid-cols-3 lg:grid-cols-4 sm:px-6 md:px-16'
        > 
           <div className='grid mx-auto'> 
            {users.map(user => (
              <UserCard
                key={user.id}
                userName={user.username}
                imageUrl='https://source.unsplash.com/random'
                userId={user.name}
              />
            ))}
          </div> 
        </div> 
       )} 
    </>
  )
})

User type is just having a bunch of types for user data, so I think this is not the problem, I guess?

export type User = {
  id: number
  name: string
  username: string
  email: string
  hobbies: string
}

Answer 1

I think your trying to map your users before the get request is done so it's undefined. Try something like

{
  users &&
    users.map((user) => (
      <UserCard
        key={user.id}
        userName={user.username}
        imageUrl="https://source.unsplash.com/random"
        userId={user.name}
      />
    ));
}