0

For some reason my map function is not returning anything in the render.

Basically I have a function that does a scrape with cheerio and then it stores the results in an array, then sets the state with it. When I check the react tools it shows that the state is updated with the array as expected. However, when the map function does not render anything and is blank on the screen.

I used very similar code in my last project but it's not working here, I feel I'm missing something simple but can't figure it out.

Here's the code: 

import React, { Component } from 'react';
import { Trender } from '../Trender/trender';
import request from 'request';
import cheerio from 'cheerio';


export class Reddit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            reddit: [],
            ready: 0
        }
        this.getRedditTrending = this.getRedditTrending.bind(this);

    }
    getRedditTrending = () => {
        var results = [];
        request('http://old.reddit.com/r/leagueoflegends', function(error, response, html) {
            var $ = cheerio.load(html);

            console.log('hi')


            $("p.title").each(function(i, element) {
                var link = 'https://reddit.com' + $(element).children().attr("href");
                var title = $(element).children().text();
                console.log('hit')

                results.push({
                    link: link,
                    title: title
                })


            }) 

        })
        this.setState({
            reddit: results,
            ready: 1,

        })

    }

componentDidMount(){
    this.getRedditTrending()


}


    render(){
        if (this.state.ready == 1) {
        return (
            <div>
            {<div>{this.state.reddit.map((i, item) => (<div>
                <div key={i}>{item.title} </div>
            </div>))}</div>}
            </div> 

        )
    }
    else { return <div>hi</div>}
    }
}

It's not giving me an error either. The map function doesn't show anything, but when I replace it with random text like "hello", that does get shown. Appreciate any advice, thanks.

weboshi
  • 1
  • 1
  • You are setting your state outside of the Async `request()` call, `results` isn't going to be filled yet when `setState()` is called – Patrick Evans Aug 27 '18 at 23:21
  • Thanks that makes sense, but now it says that this.setState is not a function when I put it in the request function at the end. Any idea why? – weboshi Aug 28 '18 at 02:49
  • edit: I changed it to a big arrow function, so now that error is gone I guess it was a binding issue. The component does not re-render still even though state updates, I guess it's still some type of async problem that I'm not understanding. Now that I put it inside the request, shouldn't it resolve, then set the state with the response, then re-render cause of the setState? I read the linked answer and I feel like this should work. – weboshi Aug 28 '18 at 03:05
  • lol finally fixed it, so if you look at my code for the map function, I mixed up where the index and currentValue should go, so when that's why it didn't map properly. it should be map(item, i) instead of map(i, item), and then the resulting render will work. wasn't async problem after all. – weboshi Aug 28 '18 at 09:15

0 Answers0