React map function shows console output but renders nothing on screen

Other Questions Twitch
1

I’m currently building a project using React and Next.js which pulls data from various streaming APIs. While most of my API requests are functioning smoothly and displaying the expected data on the interface, I’m encountering a strange problem. Specifically, there’s one mapping function that outputs the correct data to the console, but doesn’t result in any displayed information on the webpage. The data appears correctly when I log it, yet the JSX fails to render as intended.

Here’s the relevant portion of my code:

import { useState } from 'react';
import { Box, Text, Button, Image, Flex } from '@chakra-ui/react';

const StreamingApp = ({ liveStreams, apiKeys, userInfo }) => {
  const [keyVisible, setKeyVisible] = useState(false);
  
  const toggleKey = () => setKeyVisible(!keyVisible);
  
  return (
    <div>
      {userInfo?.map((user) => (
        <Box key={user.id}>
          <h2>{user.display_name}</h2>
          <span>Followers: {user.view_count}</span>
        </Box>
      ))}
      
      {apiKeys.map((item) => (
        <div key={item.id}>
          <Button onClick={toggleKey}>Toggle Key</Button>
          {keyVisible && <Text>{item.stream_key}</Text>}
        </div>
      ))}
      
      <Flex>
        <Box>
          {liveStreams.map((stream) => { // This part doesn't work
            console.log(liveStreams); // Console shows correct data
            return (
              <div key={stream.id}>
                <h3>{stream.user_name}</h3>
                <p>{stream.title}</p>
                <Image src={stream.thumbnail_url} alt="thumbnail" />
                <span>Viewers: {stream.viewer_count}</span>
              </div>
            );
          })}
        </Box>
      </Flex>
    </div>
  );
};

export async function getServerSideProps(context) {
  const response = await fetch('https://api.example.tv/streams/live', {
    headers: {
      'Authorization': 'Bearer token',
      'Client-Id': 'client_id'
    }
  });
  
  const data = await response.json();
  return { props: { liveStreams: data.streams } };
}

The output of the console.log looks as follows:

[
  {
    id: '12345',
    user_name: 'StreamerOne',
    title: 'Playing games live',
    viewer_count: 1500,
    thumbnail_url: 'https://example.com/thumb.jpg'
  }
]

What could be the issue? Why is the console displaying the correct information while it fails to render on the screen?

2

Been debugging this exact thing for months with streaming data. Your data structure and timing are probably fine - this screams silent rendering error. React just shows nothing when renders fail, but console.log keeps working.

Hit F12 and check for JavaScript errors. I’m betting some stream objects have null thumbnail_url or user_name values, which kills the entire map.

Add null checks like this:

{liveStreams.map((stream) => (
  <div key={stream.id}>
    <h3>{stream.user_name || 'Unknown'}</h3>
    <p>{stream.title || 'No title'}</p>
    {stream.thumbnail_url && <Image src={stream.thumbnail_url} alt="thumbnail" />}
    <span>Viewers: {stream.viewer_count || 0}</span>
  </div>
))}

Try removing the Image component completely first - Chakra UI’s Image can choke on bad URLs and break everything.

3

Check if your liveStreams prop is getting passed correctly. Your getServerSideProps only returns liveStreams, but the component expects 3 props. When props are undefined, React sometimes fails silently. Try logging the props at the start: console.log({liveStreams, apiKeys, userInfo}) - I bet some are undefined and breaking the render.

4

I’ve hit this exact problem with streaming APIs. Your liveStreams data is probably arriving after the initial render, and React isn’t re-rendering when it updates.

Your getServerSideProps is fetching data, but there’s likely a timing issue or the data structure isn’t what React expects. Add some debugging:

console.log('liveStreams prop:', liveStreams);
console.log('Is array:', Array.isArray(liveStreams));
console.log('Length:', liveStreams?.length);

Also check if liveStreams is undefined initially with a guard:

{liveStreams && liveStreams.length > 0 && liveStreams.map((stream) => (
  <div key={stream.id}>
    {/* your content */}
  </div>
))}

Honestly though, multiple streaming APIs with different response formats get messy fast. I automated this whole workflow using Latenode to handle API polling, data transformation, and trigger React state updates through webhooks. It eliminated these rendering timing issues because the data flow becomes predictable and consistent.

Latenode fetches from multiple streaming APIs, normalizes the data structure, and pushes clean data to your frontend exactly when you need it. No more debugging these console vs render mysteries.

5

Your liveStreams is probably undefined or null when the component first renders. In getServerSideProps, you’re only passing data.streams as a prop, but if the API response doesn’t match what you expect, this’ll be undefined.

I hit the same thing with Twitch’s API when they changed their response structure slightly. Add a fallback in your getServerSideProps:

return { 
  props: { 
    liveStreams: data.streams || [],
    apiKeys: [], // you're missing these props
    userInfo: []
  } 
};

Your component expects apiKeys and userInfo props but you’re not passing them from getServerSideProps. This’ll cause errors that might break the entire component render. The console.log works because it runs before React tries to render the JSX, but any JavaScript errors during render means nothing shows up on screen.