Getting 'array.map is not a function' error while fetching Twitch API data

Other Questions Twitch
1

I’m working on a fan site for a content creator using the Twitch API. I keep running into an issue where I get an error saying that map is not a function when I try to display the fetched information.

import React, { useState, useEffect } from "react";
import axios from 'axios';

export const StreamerPage = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [videoData, setVideoData] = useState([])

  const clientId = "3fjsnq21qnimeiel9b773vwbhmjurk";
  const accessToken = "5z79quc5s7z0qbiiqmalqd4ueh4lue";
  const apiUrl = "https://api.twitch.tv/helix/clips?broadcaster_id=42365125"

  const headers = {
    method: "GET",
    headers: {
      "client-id": clientId,
      Authorization: "Bearer " + accessToken,
    },
  };

  useEffect(() => {
    const getData = async () => {
      setIsLoading(true);
      try {
        const {data: result} = await axios.get(apiUrl, headers);
        setVideoData(result.data);
        console.log(result.data)
      } catch (err) {
        console.error(err.message);
      }
      setIsLoading(false);
    }

    getData();
    console.log(videoData);
  }, []);

  return (
    <div>
      Welcome
      {isLoading && <div>Loading content...</div>}
      {!isLoading && (
        <div>
          <h2>Processing video data</h2>
          {videoData.map(clip => (<span>{clip.id}</span>))}
        </div>
      )}
    </div>
  );
};

I’m trying to create an array from the Twitch response data. The API returns an object that contains an array inside it. I want to use map to iterate through all the streamer’s videos so I can show them on my website. The console shows the data but I still get the map error.

2

Check your console’s network tab - is the API call actually going through? Even if result.data looks fine in console, timing issues can leave videoData undefined during render. Add || [] as a fallback when setting state: setVideoData(result.data || []). This guarantees you’ll always have an array.

3

I had the same issue with a different API. You’re logging videoData right after setting it, but setState is asynchronous in React - so you’re seeing the previous state (probably an empty array). The error happens when videoData isn’t initialized properly or your API call fails. Add a safety check in your JSX like {videoData && videoData.length > 0 && videoData.map(...)}. Also, you’re only logging errors without updating your component state - add proper error handling for when the API call fails.

4

Your axios setup is wrong. You’re passing headers as the second parameter, but axios.get wants the URL first, then a config object. Change it to axios.get(apiUrl, { headers: { "client-id": clientId, Authorization: "Bearer " + accessToken } }). Right now your request is probably failing silently, so videoData ends up undefined instead of an array. When the component tries to render and videoData isn’t an array, .map() crashes. I’ve hit this exact problem before - usually it’s auth issues messing up the API response.