Possible to use data from an if statement as props on a react component?

react
1 
class ChannelList extends Component {
  renderChannels() {
    let channels = this.props.channels;
    console.log(channels)
    return channels.map((channel) => {
      HTTP.call('GET', `https://api.twitch.tv/kraken/streams/${channel.name}`,
        {headers: {Accept: 'application/vnd.twitchtv.v3+json'} },
        function(error, response) {
          if(error) {
            console.log(error)
          } else {
            if(response.data.stream === null) {
              streaming = false;
              game = "Not playing anything";
              console.log(streaming);
              console.log(game);

              <SingleChannel key={channel._id} channel={channel} streaming={streaming} game={game}/>;
            } else {
              streaming = true;
              game = response.data.stream.game;
              console.log(streaming)
              console.log(game);

              <SingleChannel key={channel._id} channel={channel} streaming={streaming} game={game}/>

            }
          }

        });


    });
    
  }

So I know the http call works and the if statements work and return what I expect them to. So my question is, is it possible to take the data stored in the variables and pass it to the SingleChannel component as props? Obviously this doesn’t work the way I have it now but is this even possible to do? Am I on the right track?

2

It’s possible to access the data just the way you have it. You can access the props in SingleChannel using this.props.channel and this.props.streaming. Another way you can do it is pass the return values as an object and access it from the SingleChannel that way. So it will be something like this.

class ChannelList extends Component {
  _request(name) {
    HTTP.call('GET', `https://api.twitch.tv/kraken/streams/${name}`,
      {headers: {Accept: 'application/vnd.twitchtv.v3+json'} },
      function(error, response) {
        if(error) {
          console.log(error)
        } else {
          if(response.data.stream === null) {
           return {streaming: false, game: "Not playing anything"}
           
          } else {
            return {streaming: true, game :response.data.stream.game}
          }
        }

      });
  }
  
  renderChannels() {
    const channels = this.props.channels;
    console.log(channels)
    return channels.map((channel) => {
      const propVals = this._request(channel.name); 
      return <SingleChannel key={channel._id} channelValues={propVals}/>;
    });
  }
}

You can now access the SingleChannel props values like this.

const {streaming, game } = this.channelValues.props
3

Thank you for the help with cleaning up my code but I still have an issue…So if I add the ‘channelValues’ prop with propVals as the value on the SingleChannel component I’m getting undefined. It looks like its returning the SingleChannel component before _request is returning the object to propVals so it’s undefined. I only think that because if I console.log(propVals) instead of returning the component, it says undefined.

4

forgot to include this before _request. I have edited the code to include the changes. Also the code above is just an example.

5

Yea I was getting _request undefined but I figured that out…what I’m trying to say is that after I assign propVals to the _request method if I console.log(propVals) it says undefined. The if statements return what’s expected though so those are working. It seems that renderChannels() is returning the component before propVals has the object. Is there a way to hold off on the return of SingleChannel until propVals has the object?

Thanks again