Ytukyg

In below code i am calling api by passing query parameter by map method and i want to concatenate the resulted json of each query and update the state.

But here i am facing problem that setState is updated with the any one of returned json.

import React from 'react';



const api_key = "key";



class card extends React.Component {

    state = {

        articles: ,

        parameter: ['a', 'b', 'c', 'd', 'e']

    };



    componentDidMount = async () => {

        this.state.newsPaper.map(async (querypara) => {

            const requstone = await fetch(`https:someapisources=${querypara}&apiKey=${api_key}`);

            const dataone = await requstone.json();



            this.setState({

                articles: dataone.articles

            });

        });

    }



    render() {

        return (

            <div>

                <div>

                    {this.state.articles.map((article, index) => {

                        return (

                            <div key={index}>

                                <div>

                                    <img src={article.urlToImage} alt="Avatar" />

                                    <div>

                                        <h4><b>{article.title}</b></h4>

                                        <p>

                                            {article.description}

                                        </p>

                                        <section>

                                            <div>

                                                <span>Source:</span>

                                                 <span>{article.source.name}</span>

                                            </div>

                                        </section>

                                    </div>

                                </div>

                            </div>

                        )

                    })}

                </div>

            </div>

        );

    }

}



export default card;

I want to add each response json and render it by setting the state how can i do that

Below is the sample json response.

{

    "status": "ok",

    "totalResults": 8,

    "articles": [{

            "source": {

                "id": "recode",

                "name": "Recode"

            },

            "author": "Recode Staff",

            "title": "title",

            "description": "Something",

            "url": "url",

            "urlToImage": "image url.jpg",

            "publishedAt": "2018-11-26T13:23:06Z",

            "content": "some content"

        },

        {

            "source": {

                "id": "recode",

                "name": "Recode"

            },

            "author": "Recode Staff",

            "title": "title",

            "description": "Something",

            "url": "url",

            "urlToImage": "image url.jpg",

            "publishedAt": "2018-11-26T13:23:06Z",

            "content": "some content"

        }

    ]

}

If I understand your question correctly, then the only adjustment needed here is to update your setState() logic so that you append articles from your response to the articles array in your state:

this.state.newsPaper.map(async (querypara) => {



    const requstone = await fetch(`https:someapisources=${querypara}&apiKey=${api_key}`);

    const dataone = await requstone.json();



    // Concatenate articles from response (dataone) to array in state

    this.setState({

        articles: this.state.articles.concat(dataone.articles)

    });

}