CODEWITHSUNDEEP
javascriptreactjs
Aaron
Aaron

Reputation: 2007

React .map() not displaying data

I've done a very similar code to this and it has worked, however, I am getting nothing from this. Where console.log data I see the correct array of objects but where I console.log user I get nothing and the User component does not get called. When I plug in different static values for User it works

import React, { Component } from 'react';
import User from './user';

export default class UserResults extends Component {
  render() {
    let data = this.props.data;
    let results;
    if (data) {
      console.log(data);
      results = data.map(user => {
        console.log(user);
        return (
          <User key={user.name}
            stream={user.stream}
            name={user.name}
            logo={user.logo}
            url={user.url} />
        );
      })
    }
    return (
      <tbody className="UserResults">
        {results}
      </tbody>
    );
  }
}

Here is what is shown when I logged data 

0:{stream: null, name: "storbeck", logo: null, url: "https://api.twitch.tv/kraken/channels/storbeck"}
1:{stream: null, name: "FreeCodeCamp", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/fre…decamp-profile_image-d9514f2df0962329-300x300.png", url: "https://api.twitch.tv/kraken/channels/freecodecamp"}
2:{stream: null, name: "OgamingSC2", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/oga…ngsc2-profile_image-9021dccf9399929e-300x300.jpeg", url: "https://api.twitch.tv/kraken/channels/OgamingSC2"}
3:{stream: null, name: "habathcx", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/habathcx-profile_image-d75385dbe4f42a66-300x300.jpeg", url: "https://api.twitch.tv/kraken/channels/habathcx"}
4:{stream: null, name: "RobotCaleb", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/robotcaleb-profile_image-9422645f2f0f093c-300x300.png", url: "https://api.twitch.tv/kraken/channels/RobotCaleb"}
5:{stream: {…}, name: "ESL_SC2", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg", url: "https://api.twitch.tv/kraken/channels/ESL_SC2"}
6:{stream: null, name: "cretetion", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/cretetion-profile_image-12bae34d9765f222-300x300.jpeg", url: "https://api.twitch.tv/kraken/channels/cretetion"}
7:{stream: null, name: "noobs2ninjas", logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/noo…ninjas-profile_image-34707f847a73d934-300x300.png", url: "https://api.twitch.tv/kraken/channels/noobs2ninjas"}

Here is the code for user.js incase you need to see it as well

import React, { Component } from 'react';

export default class User extends Component {
  render() {
    let props = this.props;
    console.log(props);
    let message;
    if (props.stream !== null) {
      message = 'Online';
    } else {
      message = 'User is offline';
    }
    return (
      <tr className="User">
        <td><img src={props.logo} alt={props.name} /></td>
        <td><a href={props.url}>{props.name}</a></td>
        <td>{message}</td>
      </tr>
    );
  }
}

Upvotes: 1

Views: 2402

Answers (2)

Aaron
Aaron

Reputation: 2007

Figured out the answer. Where I was doing the API call, I was setting the state asynchronously so the data actually had a length of 0 although it was not empty. I moved my setState call and got the desired output.

Upvotes: 2

Erik Hellman
Erik Hellman

Reputation: 279

Try adding one prop at a time. If you can console.log(user.name) inside the map try adding only that to <User />, uncomment where you use them inside the component as well so that you start as basic as you can and work yourself up to using all the props. Then you will figure out where it's acting up.

It's super weird that you're not getting an error if something is wrong.

Upvotes: 0

Related Questions