How to render multiple items from an API call using React

Question

I am using axios to get the data from an API. My component has an articles array in the state which is where the data from the API request will go.

I am still really new to React and trying to find information on displaying multiple articles on the page. That is what I am trying to figure out. Maybe I am using this.state wrong?

I've also tried fetch() then using a .then() to return the information. Neither way has helped me achieve what I am trying to display:

import React from "react";
import axios from "axios";

class Pages extends React.Component{

    constructor(){
        super();
        this.state = {
            articles : []
        }
    }

    componentDidMount(){
        this.getArticles().then(res =>
            {
                console.log(res);
                this.setState({articles : res.data.articles});
            });
    }

    getArticles(){
        return axios.get('https://newsapi.org/v2/everything?domains=wsj.com,nytimes.com&apiKey=API_KEY');
     };

      render(){
        return (
            <div className="ui raised very padded text container segment">
        <p>
        Yo!

         {this.state.articles[0] ? this.state.articles[0].author : ''}

        </p>

        </div>
        );

      }

}


export default Pages;

In the return section I want to display the article name, author, url link, and the content of the article.

log and comment res.data.articles value here. also dont add api key on public. just add some dummy text there — Ameerudheen.K
– Ameerudheen.K, Commented Jun 26, 2019 at 3:28
So take out the this.state? and do res.data.articles[0], res.data.articles[0].title etc — Saenz
– Saenz, Commented Jun 26, 2019 at 3:32
i think now u can see only one elemnt to dom and if u want to see multiple elements you need to use map function — Ameerudheen.K
– Ameerudheen.K, Commented Jun 26, 2019 at 3:41

Community · Accepted Answer · 2020-06-20 09:12:55Z

If I understand correctly, you're wanting to render all articles that are available after your axios request completes.

To achieve that, consider using the map() method on the state.articles array. This allows you to "map" each item from the raw document JSON data to an <li> element containing the article information that you want to display to your users.

When rendering each <li>, you can access the content of the current article being mapped, to render that into the components overall rendered result:

  render(){
    return (
        <div className="ui raised very padded text container segment">

        <ul>
            { this.state.articles.map((article, index) => {
               return (<li key={index}>
                <h2>{ article.name }</h2>
                <div>{ article.author }</div>
                <p>{ article.content }</p>
                <a href={article.url}>{ article.url }</a>
               </li> )
            })}
        </ul>
    <p>Yo!</p>
    </div>
    );
  }

Something also to note is that, when rendering lists in React, you should include a unique key for each list item rendered (in the code above, the key is specified as the index of the article being mapped).

Update

To render the first article only (if present) while retaining your component's current state structure, you could slice() the articles array before performing the map(). This would cause a new array (with only the first article) to be passed to map() - the end result being that only the first article is rendered:

{ this.state.articles.slice(0,1).map((article, index) => {
  /* Existing code from answer */
}}

Omg YES you are a wizard. Though I did not need all the articles I only needed one thats why I had article[0]. Where in .map would I filter it to pull from the 1st array in the API?
OMG YES! Ive been trying some many different things before I asked for help. GENIUS! THANK YOU THANK YOU!
Heh you're totally welcome - all the best with your project :-)

Collectives™ on Stack Overflow

How to render multiple items from an API call using React

1 Answer 1

Update

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

5 Comments

Related