React API mapping issue - reactjs

Question

I'm trying to make a simple fetch request and trying to map through the response to display on the page.
The API results correctly display when I console.log(data) but once I add the mapping function they display as undefined. I have tried both data.map and data.results.map
I couldn't find a working solution in any other thread!
componentDidMount() {
fetch("http://private-cc77e-aff.apiary-mock.com/posts")
.then(results => results.json())
.then(data => {
let posts = data.results.map(post => {
console.log(posts);
});
});
}
Any help would be appreciated!

Answer 1

Not sure what is the structure of your data but part of your problem is that you are trying to log posts before .map has finish populating it.
What you could do is storing the data received from the API in state (use map if you need to normalize the data) and then in render reference it using this.state.posts.
Don't forget to start with an initial value of an empty array, and you can conditionally render the posts or a loader based on the length of the array.
Here is a small example with code similar to your use case:
const Joke = ({joke}) => <div style={{border: '1px solid #ccc', padding: '15px'}}>{joke}</div>
class App extends React.Component {
// initial value (array)
state = { jokes: [] }
componentDidMount() {
// get data when component monuted
fetch("https://api.icndb.com/jokes/random/10")
.then(data => data.json())
.then(result => {
// normalize data with map
const jokes = result.value.map(obj => obj.joke);
// update the state for next render
this.setState({jokes})
})
}
render() {
const { jokes } = this.state;
return (
<div>
{
// conditionally render the array or loading (if data isn;t ready yet)
jokes.length
? jokes.map(joke => <Joke joke={joke} />)
: "Loading..."
}
</div>
);
}
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Answer 2

We are not quite sure how is your API response but you are doing the log operation somehow wrong. You are assigning the posts to a variable, but you re trying to use it inside the .map method.
I assume that your API response is something like that:
{
results: [
{ id: 1, name: "foo" },
{ id: 2, name: "bar" },
{ id: 3, name: "baz" },
],
};
This is data and since you are assigning data.results as posts this is why I assume a response like that. I'm providing the options you can try. Here, I am mimicking the API request with a function, so do not bother with this part, please.
Just log the whole results array.
const data = {
results: [
{ id: 1, name: "foo" },
{ id: 2, name: "bar" },
{ id: 3, name: "baz" },
],
};
const fakeRequest = () =>
new Promise(resolve => setTimeout(() => resolve(data), 1000));
class App extends React.Component {
componentDidMount() {
fakeRequest()
.then( data => {
console.log( data.results );
})
}
render() {
return <div>Look the console. We are logging the whole array.</div>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
You can map the array and log each item one by one
Since we just want to log the items, we don't need to use map here, forEach is enough.
const data = {
results: [
{ id: 1, name: "foo" },
{ id: 2, name: "bar" },
{ id: 3, name: "baz" },
],
};
const fakeRequest = () =>
new Promise(resolve => setTimeout(() => resolve(data), 1000));
class App extends React.Component {
componentDidMount() {
fakeRequest()
.then( data => {
data.results.forEach( post => console.log( post) )
// or as a shorthand
// data.results.forEach(console.log)
})
}
render() {
return <div>Look the console. We are logging each post one by one.</div>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Set your state with the results and map it in your render method
This is most of the time you want to do. Just logging is not enough as we know.
const data = {
results: [
{ id: 1, name: "foo" },
{ id: 2, name: "bar" },
{ id: 3, name: "baz" },
],
};
const fakeRequest = () =>
new Promise(resolve => setTimeout(() => resolve(data), 1000));
class App extends React.Component {
state = {
posts: [],
}
componentDidMount() {
fakeRequest()
.then( data => {
this.setState( { posts: data.results})
})
}
render() {
if ( !this.state.posts.length ) {
return <p>No posts yet</p>
}
return (
<div>
{
this.state.posts.map( post =>
<div key={post.id}>
<p>{post.id}</p>
<p>{post.name}</p>
</div>
)
}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>