title: React Typescript: TypeError: Cannot read properties of undefined (reading 'map')
body: <p>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 &quot;TypeError: Cannot read properties of undefined (reading 'map')&quot;. I tried all the solutions on the web without success.
  Please help!</p>
  <p>Here is the code that declared 'users';</p>
  <pre><code>export const useAllUsers = () =&gt; {
    const [users, setUsers] = useState&lt;Array&lt;User&gt;&gt;()
    const getUsers = useCallback(() =&gt; {
      axios
        .get&lt;Array&lt;User&gt;&gt;('https://jsonplaceholder.typicode.com/users')
        .then(res =&gt; {
          setUsers(res.data)})
           .catch(() =&gt; {
             return &lt;MessageError /&gt;
           })
           .finally(()=&gt;{
             setLoading(false)
           })
    }, [])
    return { getUsers, loading, users }
  }
  </code></pre>
  <p>Then, I tried to map the 'users' get the all the user data as below:</p>
  <pre><code>export const UserManagement: VFC = memo(() =&gt; {
    const { getUsers, users, loading } = useAllUsers()
    useEffect(() =&gt; getUsers(), [])
  
    return (
      &lt;&gt;
        {loading ? (
          &lt;div className=' flex justify-center items-center'&gt;
            &lt;div className='animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900'&gt;&lt;/div&gt;
          &lt;/div&gt;
        ) : (
          &lt;div
            className='grid 
          grid-cols-2 mb-16 md:grid-cols-3 lg:grid-cols-4 sm:px-6 md:px-16'
          &gt; 
             &lt;div className='grid mx-auto'&gt; 
              {users.map(user =&gt; (
                &lt;UserCard
                  key={user.id}
                  userName={user.username}
                  imageUrl='https://source.unsplash.com/random'
                  userId={user.name}
                /&gt;
              ))}
            &lt;/div&gt; 
          &lt;/div&gt; 
         )} 
      &lt;/&gt;
    )
  })
  </code></pre>
  <p>User type is just having a bunch of types for user data, so I think this is not the problem, I guess?</p>
  <pre><code>export type User = {
    id: number
    name: string
    username: string
    email: string
    hobbies: string
  }
  </code></pre>