Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

same code working for other API but not for this API

same code working for other API but not for this API
using react js

please let me am i missing something, not able to fix this issue getting this below error message
items.map is not a function

import React from "react";
class Statelist extends React.Component {

    // Constructor
    constructor(props) {
        super(props);

        this.state = {
            items: [],
            DataisLoaded: false
        };
        
    }
componentDidMount() {
        const apiUrl  = "https://newsapi.org/v2/everything?q=tesla&from=2023-04-10&sortBy=publishedAt&apiKey=ad1b44319c0d4252ab7dcbfb0b2a4d9c" ;
        fetch(apiUrl)
            .then((res) => res.json())
            .then((json) => {
                this.setState({
                    items: json,
                    DataisLoaded: true
                });
            })
            
    }
render() {
        const { DataisLoaded, items } = this.state;
        if (!DataisLoaded) return <div>
            <h1> Pleses wait some time.... </h1> </div> ;
        return (
{
                            items.map((item) => (
                                <tr>
                                    <td>{ item.id }</td>
                                    <td>{ item.articles[0].author }</td> 
                                    <td> { item.name }</td>
                                    <td> { item.email }</td>
                                </tr>
                            ))
                        }
    );
    }
}
export default Statelist;

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

items.map is not a function

Then items is not an array. So what is it?

It’s initialized as an array here:

this.state = {
  items: [],
  DataisLoaded: false
};

But later is updated here:

this.setState({
  items: json,
  DataisLoaded: true
});

Which means json is not an array. So what is it?

Visiting the API URL in your code, I see data starting with:

{"status":"ok","totalResults":13394,"articles":[

(and so on)

Well, that’s not an array. It’s an object. Perhaps you want that top-level articles property on the object, which contains an array?:

this.setState({
  items: json.articles,
  DataisLoaded: true
});

I can’t know for certain, but you can. You can examine the structure of the data you’re receiving from the API and decide what data you want from that structure and how you want to use that data.

As far as the error itself is concerned, you simply can’t call .map() on an object, only on an array.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading