How to properly map results from api fetch react - reactjs

Question

I've got my fetch request setup and properly retrieving the data from the API. However, I'm receiving the 'Unhandled Rejection (TypeError): items.map is not a function' error when I try to map the results into list items. How am I meant to map out the 'titles' into deliverables?
Here's my current setup:
Output of fetch request
{1: {…}, 2: {…}, 3: {…}, 4: {…}, 6: {…}, 7: {…}, 8: {…}, 9: {…}}
1:
entries: "598"
id: "1"
title: "Newsletter SignUp"
__proto__: Object
2: {id: "2", title: "Contact Page Form", entries: "663"}
3: {id: "3", title: "Sidebar RFI", entries: "114"}
4: {id: "4", title: "White Paper Email Sign-Up", entries: "72"}
6: {id: "6", title: "White Paper Registration", entries: "84"}
7: {id: "7", title: "Services RFI", entries: "766"}
__proto__: Object
Code to fetch / render from api
componentDidMount() {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Basic XXX");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
fetch("https://www.example.com/wp-json/gf/v2/forms", requestOptions)
.then(res => res.json())
.then(
(result) => {
console.log(result);
this.setState({
isLoaded: true,
items: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error,
isLoaded,
items
} = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<div>
<div>
{items.map(item => (
<li key={item.title}>
{item.title}
</li>
))}
</div>
</div>
);
}
}

Answer 1

This is a question about javascript basics, not react or apis. The question is really how to map over an object with object as values.
One way is to get the keys (like SomoKRoceS shows) is Object.keys:
Object.keys(obj).map(key => (
<li key={obj[key].title}>
{items[obj].title}
</li>
))
Another way is to "for in" :
for (const key in obj) {
if (obj.hasOwnProperty(prop)) {
list.push(<li key={obj[key].title}>{items[obj].title}</li>)
}
}
return list;
Another way is Object.values:
Object.values(obj).map(val => <li key={val.title}>{val.title}</li>)

Answer 2

You can do something like this:
export default class Example extends React.Component {
// Your state will look something like this after the get request
state = {
result: {
1: { id: "1", title: "Contact Page Form", entries: "663" },
2: { id: "2", title: "Contact Page Form", entries: "663" },
3: { id: "3", title: "Sidebar RFI", entries: "114" },
4: { id: "4", title: "White Paper Email Sign-Up", entries: "72" },
6: { id: "6", title: "White Paper Registration", entries: "84" },
7: { id: "7", title: "Services RFI", entries: "766" }
}
};
renderResult = () => {
const res = Object.values(this.state.result);
return res.map(item => <div>{item.title}</div>);
};
render() {
return <div>{this.renderResult()}</div>;
}
}
Live demo here: https://codesandbox.io/s/polished-river-kueyq?file=/src/App.js:51-738

Answer 3

map() is a method applied on arrays. You can create an array of all indexes of the object, and then map over it - for each element, get the value of that key from the original object.
So you can do something like this:
return (
<div>
<div>
{Object.keys(items).map(item => (
<li key={items[item].title}>
{items[item].title}
</li>
))}
</div>
</div>
);
Object.keys(items) will create an array of all keys in items which is [1,2,3,...], then the map will iterate over that array and you will be able to access the desired object with that key with items[item].