title: Keep getting an error: listDevices.map is not a function
body: <p>I have a Json file with information about various <strong>devices:</strong></p>
  <pre><code>    {
    &quot;devices&quot;: {
      &quot;deviceList&quot;: [
        {
          &quot;name&quot;: &quot;iPhone X&quot;,
          &quot;id&quot;: &quot;193ywpe740&quot;,
          &quot;deviceType&quot;: &quot;Mobile&quot;,
          &quot;os&quot;: &quot;iOS&quot;,
          &quot;brand&quot;: &quot;Apple&quot;,
          &quot;quantity&quot;: 3,
        },
        {
          &quot;deviceType&quot;: &quot;Tablet&quot;,
          &quot;name&quot;: &quot;Apple iPad (Wi-Fi, 32GB) - Gold&quot;,
          &quot;brand&quot;: &quot;Apple&quot;,
          &quot;os&quot;: &quot;MacOS&quot;,
          &quot;id&quot;: &quot;1563175150&quot;,
          &quot;quantity&quot;: 5
        },
        {...}
  </code></pre>
  <p><strong>My cardList js file:</strong></p>
  <pre><code>import ReservationsListCard from &quot;components/reservationsListCard&quot;;
  
  const CardListSection = () =&gt; {
    const devices_url =
      &quot;devices.json&quot;;
  
    const [listDevices, setListDevices] = useState([]);
  
    useEffect(() =&gt; {
      const fetchData = async () =&gt; {
        try {
          const devicesResponse = await fetch(devices_url);
          const devicesJson = await devicesResponse.json();
          const [listDevices] = devicesJson.devices.deviceList;
  
  
          setListDevices(listDevices);
        } catch (error) {
          //console.log(&quot;error&quot;, error);
        }
      };
  
      fetchData();
    }, []);
  
    return (
      &lt;div className=&quot;device-list-section&quot;&gt;
        {listDevices.map((device) =&gt; (
          &lt;ReservationsListCard key={device.id} /&gt;
        ))}
  
        {console.log(listDevices)}
      &lt;/div&gt;
    );
  };
  
  export default CardListSection;
  </code></pre>
  <p>What I am trying to achieve is to get the &quot;id&quot; of every device and pass it to my <em>ReservationsListCard</em> component which then takes that id and displays devices name, brand, image, etc. but I keep running in to the error in the title. What could I be doing wrong ? My theory is that I am not selecting the id's of the devices. Or maybe it's a problem with the component <em>ReservationsListCard</em> ?</p>