Qfyilyi

I am trying to build a news app that displays top 20 articles per country. However, I tried putting my setState call inside a loop but I quickly realized that they were being overwritten and the only one that would display is the last one. I was wondering how could I achieve this without overriding the previous entries. Thank you in advance!

//the following code is inside my App.js file and inside the App component

getNews = async (e) => {

e.preventDefault();

const country = e.target.elements.country.value;

const api_call = await fetch(this.buildURL(country));

const data = await api_call.json();



  if (country) {

    console.log(data);



    //i changed this to just display the first article out of 20

    this.setState({

        title: data.articles[0].title,

        image: data.articles[0].urlToImage,

        description: data.articles[0].description,

        author: data.articles[0].author,

        link: data.articles[0].url,

        err: ""

    });

  }

  else {

    this.setState({

      title: undefined,

      image: undefined,

      description: undefined,

      author: undefined,

      link: undefined,

      err: "Please enter valid country"

    });

  }





}



  render() {

      return(

      <div>

        <Titles />

        <Form getNews={this.getNews}/>

        <News title={this.state.title}

              image={this.state.image}

              description={this.state.description}

              author={this.state.author}

              link={this.state.link}

              err={this.state.err}

        />

      </div>

    );

    }

This is a beginners project so pls keep that in mind haha.

So you want include all news items in state, then loop over them and create a News element for each of them. Something like this for the request:

getNews = async e => {

  e.preventDefault();

  const country = e.target.elements.country.value;

  if (!country) {

    this.setState({

      articles: null,

      err: "Please enter valid country"

    });

  }

  let data;

  try {

    data = await fetch(this.buildURL(country)).then(res => res.json());

  } catch (error) {

    this.setState({

      articles: null,

      err: "Please enter valid country"

    });

  }

  if (data) {

    this.setState({

      articles: data.map(article => ({

        title: article.title,

        image: article.urlToImage,

        description: article.description,

        author: article.author,

        link: article.url

      }))

    });

  }

};

although I do not guarantee it is bug free!

Then when you have all articles in state, you can loop over them:

render() {

  return (

    <div>

      <Titles />

      <Form getNews={this.getNews} />



      {this.state.articles.map(article => (

        <News

          title={article.title}

          image={article.image}

          description={this.state.description}

          author={article.author}

          link={article.link}

          err={article.err}

        />

      ))}

    </div>

  );

}

or you can spread the props like this, if you know the object key names you stored in state match exactly those the News component expects:

  {this.state.articles.map(article => (

    <News {...article}/>

  ))}

Your state should have an array instead of just provision for one object.

this.setState({

    title: data.articles[0].title,

    image: data.articles[0].urlToImage,

    description: data.articles[0].description,

    author: data.articles[0].author,

    link: data.articles[0].url,

    err: ""

});

Should be changed to something like the following.

var articles = this.state.articles.slice();

var newArticle = {

    title: data.articles[0].title,

    image: data.articles[0].urlToImage,

    description: data.articles[0].description,

    author: data.articles[0].author,

    link: data.articles[0].url,

    err: ""

};

articles.push(newArticle);



this.setState(articles);

Also note that setState is asynchronous. So sometimes, you should use the existing state to determine the new value of state. Refer setState documentation