CODEWITHSUNDEEP
javascriptreactjs
Saenz
Saenz

Reputation: 19

How to render multiple items from an API call using React

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.

Upvotes: 1

Views: 1301

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

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 */
}}

Upvotes: 2

Related Questions