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.