Presently, my Nextjs page is making multiple Twitch API calls successfully and displaying the correct data. However, one of the mapping functions is failing to render anything on the page, even though the console log shows the data. Although I am relatively new to working with APIs, this project is something I find enjoyable, and I am determined to complete it.
Any assistance would be greatly appreciated!
Screen capture of the page https://i.sstatic.net/0ZPRK.png
//pages/TwitchDash/index.js
import axios from "axios";
import {
VStack,
Heading,
Divider,
Text,
Box,
Badge,
Center,
Button,
Flex,
Link,
SimpleGrid,
Stack,
useColorModeValue,
HStack,
Icon,
chakra,
Image,
} from "@chakra-ui/react";
import { getSession } from "next-auth/react"
import React, { useState } from "react"
...
export default Twitch;
// console.log(TwitchLive)
[
{
id: '43584848620',
user_id: '12731745',
...
},
{
id: '43584228412',
user_id: '63526015',
...
},
...
]