Next.js map function shows data in console but won't display on page?

Other Questions Twitch
1

I’m working on a streaming dashboard in Next.js that pulls data from multiple gaming platform endpoints. Everything works great except for one specific map function that’s driving me crazy.

I can see all the data perfectly when I console.log it, but nothing shows up on the actual page. The other mapping functions work fine and display their content without issues. I’m still pretty new to working with APIs but I really want to get this project working.

Has anyone run into this before? I’ve been stuck on this for hours and could really use some help!

// pages/StreamDash/index.js
import fetch from "node-fetch";
import {
  Container,
  Title,
  Separator,
  Paragraph,
  Card,
  Label,
  Grid,
  Avatar,
  Wrapper,
  Stack
} from "@ui/components";
import { getAuth } from "next-auth/react"
import React, { useState } from "react"
import { BsPlay } from 'react-icons/bs'

const Dashboard = ({ LiveStreams, ApiKey, Profile }) => {
  const [keyVisible, setKeyVisible] = useState(false);
  const showApiKey = () => setKeyVisible(true);
  const hideApiKey = () => setKeyVisible(false);

  if (!Dashboard) {
    return <div>Loading streams...</div>;
  }
  
  return (
    <>
      <Container>
        {Profile?.map((profile) => (
          console.log(Profile),
          <Card key={profile.id}>
            <Grid>
              <Title padding="4">{profile.username}</Title>
              <Label
                size="md"
                variant="primary"
              >Total Views: {profile.total_views}
              </Label>
            </Grid>
          </Card>
        ))}
        
        {ApiKey.map((secret) =>(
          <div key={secret.id}>
            <button onClick={showApiKey}>Reveal Key</button>
            <button onClick={hideApiKey}>Hide Key</button>
            {keyVisible ? <span>{secret.api_key}</span> : null}
          </div>
        ))}
      </Container>
      
      <Wrapper>
        <Card maxWidth="sm">
          <Stack padding={6}>
            {LiveStreams.map((stream) => { // Problem is here
              console.log(LiveStreams), // Console shows correct data
              <div key={stream.id}>
                <span>{stream.broadcaster_name}</span> // Nothing renders here
                <Title variant="bold" size="xl">
                  {stream.broadcaster_name}
                </Title>
                <Paragraph color="muted">
                  {stream.game_name}
                </Paragraph>
              </div>
            })}
          </Stack>
          
          {LiveStreams.map((stream) => {
            <div key={stream.id}>
              <Avatar
                height={32}
                width="full"
                src={stream.preview_image}
                alt="Live stream preview"
              />
              <Grid>
                <Title color="white" weight="bold">
                  {stream.current_viewers}
                </Title>
                <button className="watch-btn">
                  Watch Now
                </button>
              </Grid>
            </div>
          })}
        </Card>
      </Wrapper>
    </>
  );
};

Dashboard.getInitialProps = async (ctx) => {
  try {
    const auth = await getAuth({
      req: ctx.req,
    });
    
    const liveData = await fetch(
      `https://api.platform.tv/v1/streams/live?user_id=${auth.userId}`,
      {
        headers: {
          "Authorization": `Bearer ${auth.token}`,
          "Client-Id": `${process.env.PLATFORM_CLIENT_ID}`,
        },
      }
    );
    
    const keyData = await fetch(
      `https://api.platform.tv/v1/user/key?id=${auth.userId}`,
      {
        headers: {
          "Authorization": `Bearer ${auth.token}`,
          "Client-Id": `${process.env.PLATFORM_CLIENT_ID}`,
        },
      }
    );
    
    const userData = await fetch(
      `https://api.platform.tv/v1/users/${auth.userId}`,
      {
        headers: {
          "Authorization": `Bearer ${auth.token}`,
          "Client-Id": `${process.env.PLATFORM_CLIENT_ID}`,
        },
      }
    );

    const LiveStreams = liveData.data.results;
    const ApiKey = keyData.data.results;
    const Profile = userData.data.results;
    
    return { LiveStreams, ApiKey, Profile };
  } catch (err) {
    console.log(err);
    return <div>Error: {err.message}</div>;
  }
};

export default Dashboard;
2

Had the exact same problem building my first React dashboard. Two issues here - your map function syntax is wrong, and you’ve got console.log statements inside your JSX return that mess things up. Pull those console.logs out of the map functions and fix your return statements. Your Profile map works by accident because of the comma operator, but don’t rely on that. When I’m debugging API data, I just console.log the props at the top of the component, not in the render logic. Also double-check your LiveStreams array isn’t empty - APIs love to change structure and nest data somewhere you don’t expect.

3

Had this exact same problem when I built my first Next.js project with external APIs. Your map function syntax is definitely broken, but also check that getInitialProps is actually returning what you think it is. I’ve seen APIs change their response structure and suddenly liveData.data.results becomes undefined or null - then your map just fails silently. Add null checks like LiveStreams?.length > 0 before mapping. That console.log inside your JSX is also a problem - move it outside the return statement. Your Profile map only works because of some weird comma operator side effect, but don’t rely on that. Fix your return statements first, then add proper error handling for when the API doesn’t give you what you expect.

4

Had this exact problem when building my first dashboard! Your map function syntax is wrong - you’re using curly braces {} which need an explicit return statement. Since you’re not returning anything, React can’t render it (even though console.log works fine). Two ways to fix it: add return before your JSX, or swap the curly braces for parentheses () to get implicit return. Parentheses are cleaner for simple JSX like yours. Your Profile map works because of the comma operator, but you should stick with the return pattern for consistency.

5

Classic mistake! You’re using curly braces {} in your map but not returning anything. That’s why console.log works but nothing renders - the function executes but doesn’t return JSX to React. Just add return before your <div> or switch to parentheses () instead of braces.

6

dude you’re missing the return statement in your map functions! look at your LiveStreams.map - you’ve got curly braces but no return. either change the `{