Currently I have a page in Nextjs that is calling multiple twitch endpoints, all of them work and display the appropriate data, however one of the mapping functions will not render anything, yet if I console log the the map it does? I am somewhat new to using API's but this project is something fun and I seriously want to finish it.
Any help would be amazing!
Page screenshot 
//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"
// import UserCards from '../../components/topCards'
import { FaArrowRight } from 'react-icons/fa'
import { CategoryCard } from '../../components/topCards/CategoreyCard'
const Twitch = ({ TwitchLive, Sk, User }) => {
const [showKey, setShowKey] = useState(false);
const Show = () => setShowKey(true);
const Hide = () => setShowKey(false);
if (!Twitch) {
return <div>Loading...</div>;
}
return (
<>
<VStack>
{User?.map((us) => (
console.log(User),
<Box key={us.id}>
<Center>
<Heading p="4">{us.display_name}</Heading>
<Badge
fontSize="15px"
colorScheme="purple"
>View Count {us.view_count}
</Badge>
</Center>
</Box>
))}
{Sk.map((key) =>(
<div key={key.id}>
<Button margin={2} onClick={Show}>Show Stream Key</Button>
<Button margin={2} onClick={Hide}>Hide Stream Key</Button>
{showKey ? <Text>{key.stream_key}</Text> : null}
</div>
))}
</VStack>
<Flex
bg={useColorModeValue("#F9FAFB", "gray.600")}
p={50}
w="full"
alignItems="center"
justifyContent="center"
>
<Box
maxW="xs"
mx="auto"
bg={useColorModeValue("white", "gray.800")}
shadow="lg"
rounded="lg"
>
<Box px={4} py={2}>
{TwitchLive.map((tl) => { //This function here is the error
console.log(TwitchLive), // This console log returns the correct data you can see in the linked image.
<div key={tl.id}>
<a>{tl.user_name}</a> // This renders nothing along with the rest of this ?
<chakra.h1
color={useColorModeValue("gray.800", "white")}
fontWeight="bold"
fontSize="3xl"
textTransform="uppercase"
>
{tl.user_name}
</chakra.h1>
<chakra.p
mt={1}
fontSize="sm"
color={useColorModeValue("gray.600", "gray.400")}
>{tl.description}
</chakra.p>
</div>
})}
</Box>
{TwitchLive.map((tl) => {
<div key={tl.id}>
<Image
h={48}
w="full"
fit="cover"
mt={2}
src={tl.thumbnail_url}
alt="Twitch live stream thumbnail"
/>
<Flex
alignItems="center"
justifyContent="space-between"
px={4}
py={2}
bg="gray.900"
roundedBottom="lg"
>
<chakra.h1 color="white" fontWeight="bold" fontSize="lg">
{tl.viewer_count}
</chakra.h1>
<chakra.button
px={2}
py={1}
bg="white"
fontSize="xs"
color="gray.900"
fontWeight="bold"
rounded="lg"
textTransform="uppercase"
_hover={{
bg: "gray.200",
}}
_focus={{
bg: "gray.400",
}}
>
Add to cart
</chakra.button>
</Flex>
</div>
})}
</Box>
</Flex>
</>
);
};
Twitch.getInitialProps = async (ctx) => {
try {
const session = await getSession({
req: ctx.req,
});
// Console log is acurate won't render to page?
const followed = await axios.get(
`https://api.twitch.tv/helix/streams/followed?user_id=${session.id}`,
{
headers: {
"Authorization": `Bearer ${session.accessToken}`,
"Client-Id": `${process.env.TWITCH_CLIENT_ID}`,
},
}
);
// Working Fine
const key = await axios.get(
`https://api.twitch.tv/helix/streams/key?broadcaster_id=${session.id}`,
{
headers: {
"Authorization": `Bearer ${session.accessToken}`,
"Client-Id": `${process.env.TWITCH_CLIENT_ID}`,
},
}
);
// Working Fine
const Info = await axios.get(
`https://api.twitch.tv/helix/users?id=${session.id}`,
{
headers: {
"Authorization": `Bearer ${session.accessToken}`,
"Client-Id": `${process.env.TWITCH_CLIENT_ID}`,
},
}
);
const TwitchLive = followed.data.data;
const Sk = key.data.data;
const User = Info.data.data;
return { TwitchLive, Sk, User };
} catch (error) {
console.log(error);
return <div>{error.message}</div>;
}
};
export default Twitch;
// console.log(TwitchLive)
[
{
id: '43584848620',
user_id: '12731745',
user_login: 'deadlyslob',
user_name: 'Deadlyslob',
game_id: '470840663',
game_name: 'The Cycle: Frontier',
type: 'live',
title: 'Thursday SPACE TARKOV TIME - SwampFox Joining Later - !ASUS - !NORD',
viewer_count: 2191,
started_at: '2021-10-21T11:08:04Z',
language: 'en',
thumbnail_url: 'https://static-cdn.jtvnw.net/previews-ttv/live_user_deadlyslob-{width}x{height}.jpg',
tag_ids: [ '6ea6bca4-4712-4ab9-a906-e3336a9d8039' ],
is_mature: false
},
{
id: '43584228412',
user_id: '63526015',
user_login: 'bakeezy',
user_name: 'BakeeZy',
game_id: '509658',
game_name: 'Just Chatting',
type: 'live',
title: 'BAKEEZY PLAYING TARKOV SHOCKING!!! !cheats2 !kappa !battlefield ',
viewer_count: 509,
started_at: '2021-10-21T07:22:25Z',
language: 'en',
thumbnail_url: 'https://static-cdn.jtvnw.net/previews-ttv/live_user_bakeezy-{width}x{height}.jpg',
tag_ids: [
'6ea6bca4-4712-4ab9-a906-e3336a9d8039',
'a3cf86b7-90a4-409d-be29-e672c6c6e8fd'
],
is_mature: false
},
{
id: '44149261325',
user_id: '72839510',
user_login: 'redopz',
user_name: 'RedOpz',
game_id: '470840663',
game_name: 'The Cycle: Frontier',
type: 'live',
title: 'Want some Keys?! !youtube',
viewer_count: 177,
started_at: '2021-10-21T06:45:41Z',
language: 'en',
thumbnail_url: 'https://static-cdn.jtvnw.net/previews-ttv/live_user_redopz-{width}x{height}.jpg',
tag_ids: [ '6ea6bca4-4712-4ab9-a906-e3336a9d8039' ],
is_mature: false
},
{
id: '44151126637',
user_id: '96061540',
user_login: 'artesianbuilds',
user_name: 'artesianbuilds',
game_id: '509658',
game_name: 'Just Chatting',
type: 'live',
title: "Don't sleep on these builds, or you'll regret it! || !hiring !screwdriver !youtube !website !waterbottle",
viewer_count: 0,
started_at: '2021-10-21T13:02:29Z',
language: 'en',
thumbnail_url: 'https://static-cdn.jtvnw.net/previews-ttv/live_user_artesianbuilds-{width}x{height}.jpg',
tag_ids: [
'6ea6bca4-4712-4ab9-a906-e3336a9d8039',
'64d9afa6-139a-48d5-ab4e-51d0a92b22de',
'7b49f69a-5d95-4c94-b7e3-66e2c0c6f6c6',
'cd9ed640-426d-4a08-b8e0-417a61197264',
'c38aeb6e-e8c7-452a-88e1-a3ed62c2e846',
'b3d8d789-dd4d-4566-8a9b-62a182ada7d5'
],
is_mature: true
}
]
