React fetching and displaying data issue

Question

I'm new to react, and trying to practice I'm facing an issue. I want to fetch data from Hacker News, and display the content.

Well, the fetch part is OK, I get the urls I want with the content I want. But when I try to display it nothing happens. If I log the content, I can see it, but I'm not able to display it in HTML.

Anyone has an idea about it?

Here's the code

setUrls () {

        // Define API base URL
        let baseUrl = "https://hacker-news.firebaseio.com/v0/item/";

        // IDs of stories
        const ids = [22694891,22693792,22696252,22697212,22695174,22660888,22689301,22695264];

        // Empty Array for content
        const cards = []

        for (let i = 0; i < ids.length; i++){
            fetch(baseUrl + ids[i] + ".json")
            .then(response => response.json())
            .then((data) => {
                cards.push(data);  
            })
        }
        this.setState({
            cards: cards
        })
    }

    componentDidMount () {
        this.setUrls();
    }

    render() {
        let cards = this.state.cards;
        console.log(cards)

        return (
            cards.map(card => {
                return (
                    <div>{card.id}</div>
                )
            })
        )
    }

In render(), when I log the state I can see it, but then the HTML is empty.

Wai Ha Lee · Accepted Answer · 2020-03-28 13:28:28Z

2

I refactor your code. Try it.

setUrls () {
    // Define API base URL
    let baseUrl = "https://hacker-news.firebaseio.com/v0/item/";

    // IDs of stories
    const ids = [
      22694891,
      22693792,
      22696252,
      22697212,
      22695174,
      22660888,
      22689301,
      22695264,
    ];
    
    ids.forEach((id) => {
      fetch(`${baseUrl}${id}.json`)
        .then(response => response.json())
        .then((data) => {
          this.setState(({ cards }) => ({
            cards: [ ...cards, data ]
          }));
        })
        .catch(({ message }) => {
          console.error(message);
        });
    });
}

componentDidMount () {
    this.setUrls();
}

render() {
    const { cards } = this.state;

    return (
        cards.map(card => (
          <div>{card.id}</div>
        ))
    )
}

edited Mar 28, 2020 at 13:28

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Mar 27, 2020 at 19:56

Kirill Skomarovskiy

1,5751 gold badge9 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thibault Over a year ago

Wow, thank you a lot! It works! Now I can read the code to understand the difference and why mine wasn' working ;)

Kirill Skomarovskiy Over a year ago

1. In ReactJS don't use Array.prototype.push(). 2. You create let cards = [] and push data to it from the promise. Then pass cards to this.setState({ cards }); But Promise will be fulfilled after this.setState({ cards }); So you pass empty array to state.

Collectives™ on Stack Overflow

React fetching and displaying data issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related