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;

>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.

Leave a Reply