0

by my logic it should work but react doesnt render or even show an error

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

import { useState, useEffect } from 'react'

const FetchData = () => {
  const [user, changeUser] = useState([])
  const getData = async () => {
    try {
      const response = await fetch(url)
      const users = await response.json()
      changeUser((curruser) => {
        curruser.push(users)
        return curruser
      })
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    getData()
  }, [])

  return (
    <ol>
      {user.map((pep) => {
        console.log(pep)
        pep.map((people) => {
          const { login, html_url, avatar_url, id } = people
          return (
            <ul key={id}>
              <img src={avatar_url} title="photo of him" />
              <h1>{login}</h1>
              <a href={html_url}>his github</a>
            </ul>
          )
        })
      })}
    </ol>
  )
}
export default FetchData

the problem is in the return of the function i tried just using user[0].map(...rest of the logic) it threw me an error "Cannot read properties of undefined (reading 'map')" but now with user being an array of arrays i tried interating over evey array eventho it should only have one and now it just doesn't show any errors and renders nothing

No0bYebY
  • 21
  • 2
  • 1
    hey @NoObYebY try this `changeUser((curruser) => [...curruser, ...users])`. – Atul Kumar Aug 02 '23 at 13:17
  • Does this answer your question? [Push method in React Hooks (useState)?](https://stackoverflow.com/questions/54676966/push-method-in-react-hooks-usestate) – RubenSmn Aug 02 '23 at 13:22
  • 1
    In addition to what Atul Kumar and RubenSmn have said, if I understand correctly, you're not returning anything to the first map, so even though it's performing a second map, the first map (which is ultimately what gets rendered) will be an array of `undefined`s. Try adding a return before the second map `pep.map((people)...`. – Bets Aug 02 '23 at 13:27

0 Answers0