title: I have a problem making a request to the StarWars API
body: <p>I am a person who is learning to use APIs with react and i have a problem because my code does not work. I get the following error in the console: Uncaught TypeError: Cannot read properties of undefined (reading 'map')  App.jsx:24
  .However I have optional chaining applied.
  I show you my code and I hope you can help me</p>
  <p>useFetch.js</p>
  <pre><code>import axios from &quot;axios&quot;
  import { useEffect, useState } from &quot;react&quot;
  
  const useFetch = url =&gt; {
  
      const [response, setResponse] = useState()
  
      useEffect( () =&gt; {
          axios.get(url)
          .then(res=&gt;setResponse(res.data))
          .catch(err=&gt; console.log(err.message))
      }, [])
  
      return response
  
  }
  
  export default useFetch
  </code></pre>
  <p>App.jsx</p>
  <pre><code>import axios from 'axios'
  import { useEffect, useState } from 'react'
  import './App.css'
  import FormInput from './components/FormInput'
  import Residents from './components/Residents'
  
  function App() {
  
    const [planets, setPlanets] = useState()
    const [response, setResponse] = useState()
  
    const number = parseInt(response)
  
    const updatePage = number =&gt; {
      const URL = `https://swapi.dev/api/planets/${number}/`
      axios.get(URL)
        .then(res =&gt; setPlanets(res.data))
        .catch(err =&gt; console.log(err.message))
    }
  
    useEffect(() =&gt; {
      const URL = `https://swapi.dev/api/planets/${number}/`
      axios.get(URL)
        .then(res =&gt; updatePage())
        .catch(err =&gt; console.log(err.message))
    }, [])
  
    console.log(number)
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;FormInput
          setResponse={setResponse}
        /&gt;
        &lt;hr /&gt;
        {
          planets?.residents.map(resident =&gt; (
            &lt;Residents
              resident={resident}
              key={resident.name}
  
            /&gt;
          ))
        }
      &lt;/div&gt;
    )
  }
  
  export default App
  
  
  </code></pre>
  <p>Residents.jsx</p>
  <pre><code>import React from 'react'
  import useFetch from '../hooks/useFetch'
  
  const Residents = ({ resident }) =&gt; {
  
            const users = useFetch(resident)
  
  
            console.log(users)
     
    return (
      &lt;article&gt;
          
  
      &lt;/article&gt;
    )
  }
  
  export default Residents
  </code></pre>