title: × TypeError: Cannot read property 'map' of undefined but can console.log the key holding the array - ReactJS with hooks
body: <p>Apologies but i'm bashing my head off a wall with this and none of the other examples i've seen on here have helped. I am trying to map the contents of the array held in the <code>data</code> key of a JSON object which is fetched from the weatherbit API. I'm doing this so that I can access the array properties (including the nested <code>weather</code> object) for a weather app I am trying to build in modern React (I am using hooks). I've screenshotted the JSON so you can see the API structure.</p>
  <p><a href="https://i.stack.imgur.com/wrnae.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wrnae.png" alt="Uncollapsed" /></a></p>
  <p><a href="https://i.stack.imgur.com/uzN6W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uzN6W.png" alt="Collapsed" /></a></p>
  <p>I can see the array in the inspection window of the browser when I <code>console.log(currentWeather.data)</code>. Why can I not map this given that my map is pointing to the data key/attribute of the <code>currentWeather</code> object? I keep receiving &quot;cannot read property 'map' of undefined'.</p>
  <p>I have a component called <code>CurrentWeatherList</code> which is performing the mapping and then passing the mapped array down as props:</p>
  <pre><code>import CurrentWeather from './CurrentWeather';
  
  function CurrentWeatherList({currentWeather}){
  
      // return nothing if there is no current weather object, otherwise...
      if (!currentWeather) return null;
  
      console.log(currentWeather);
      console.log(currentWeather.data);
  
  
      // Map the currentWeather
      const displayCurrentWeather = currentWeather.data.map(weather =&gt; {
          return &lt;CurrentWeather
                  weather={weather}/&gt;
      })
  
      return(
          &lt;&gt;
          {displayCurrentWeather}
          &lt;/&gt;
      )
  }
  
  
  
  export default CurrentWeatherList;
  </code></pre>
  <p>Edited:</p>
  <p>My container, <code>CurrentWeatherContainer</code> which is performing the fetch from the API is below. I'm using a key but this is for a practice project from a free account - I can omit if i'm violating any policy:</p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  import CurrentWeatherList from &quot;../components/CurrentWeatherList&quot;;
  import LocationAsCityForm from &quot;../components/LocationAsCityForm&quot;;
  
  function CurrentWeatherContainer(){
  
      // Sets state for the current weather object
      // also sets state for the location input by the user from LocationAsCityForm
      const [currentWeather, setCurrentWeather] = useState([]);
      const [location, setLocation] = useState(&quot;&quot;);
  
      
      // handles the location submitted by the &quot;as city&quot; form
      // invokes the fetch passing the location to getCurrentWeatherAsCity
  
      const handleLocationAsCitySubmit = (location) =&gt; {
          getCurrentWeatherAsCity(location);
      }
  
      // This is the fetch which provides currentWeather from the API using the form location input by user
      
      const getCurrentWeatherAsCity = (location) =&gt; {
      const url = &quot;https://api.weatherbit.io/v2.0/current?city=&quot;+location+&quot;&amp;key=42f951c1eea94e33a68cd790a1f613fb&quot;
  
      console.log(&quot;Url: &quot; + url);
      
      fetch(url)
          .then(res =&gt; res.json())
          .then(data =&gt; {
              setCurrentWeather(data);
          })
  
      }
  
      // Format the user input to the form
      
      const formatInput = (userInput) =&gt; {
          const lowerCase = userInput.toLowerCase();
          const formattedString = lowerCase;
          return formattedString;
      }
  
  
      return(
          &lt;&gt;
          This is the CurrentWeatherContainer
          &lt;LocationAsCityForm 
          handleLocationAsCitySubmit={handleLocationAsCitySubmit}
          location={location}
          setLocation={setLocation}
          formatInput={formatInput}
          /&gt;
  
          &lt;CurrentWeatherList 
          location={location}
          currentWeather={currentWeather}
          /&gt;
  
          &lt;/&gt;
      )
  
  
  }
  
  
  export default CurrentWeatherContainer;
  </code></pre>
  <p>And finally the code for the  <code>LocationAsCityForm</code> component which takes in the user inputted location to perform the fetch:</p>
  <pre><code>import { Form, Input } from 'semantic-ui-react'
  
  function LocationAsCityForm({handleLocationAsCitySubmit, location, setLocation, formatInput}) {
  
      const handleInput = (event) =&gt; {
          const formattedInput = formatInput(event.target.value);
          setLocation(formattedInput);
      }
  
      const submitIngredients = (event) =&gt; {
          event.preventDefault();
          handleLocationAsCitySubmit(location);
      
      }
      return (
          &lt;&gt; 
      
              &lt;Form className=&quot;form-box&quot; onSubmit={submitIngredients}&gt;
                               
                      &lt;Form.Field&gt;
                      &lt;label&gt;Enter your location&lt;/label&gt;
                      &lt;Input action='Search' placeholder='e.g. Edinburgh, UK...' onChange={handleInput}/&gt;
                      &lt;/Form.Field&gt;              
             &lt;/Form&gt;
  
          &lt;/&gt;
      );
  }
  
  export default LocationAsCityForm;
  
  </code></pre>