Salatiel Queiroz Salatiel Queiroz - 5 months ago 78
React JSX Question

ReactJS "Unhandled Rejection (TypeError): this.state.features.map is not a function"

I'm learning React and now i'm trying do a get resquest and list with map but when I run this code they come up with this error "Unhandled Rejection (TypeError): this.state.features.map is not a function". I already search this but I'm not undertand what its going on.

import React, { Component } from 'react';
import './App.css';

class App extends Component {

constructor() {
super();
this.state = {
features: [{
id: 1,
name: 'Test',
count: 1
}]
}
}

componentWillMount() {
fetch("http://demo6085176.mockable.io/features")
.then(response => response.json())
.then(json => {
console.log(json);
this.setState({
features: json,
});
});
console.log(this.state.features)

}

render() {
return (
<div className="App">
<ul>
{
this.state.features.map(function(feature){
return (
<li key={feature.id}><button type="button">Upvote</button> ({feature.count}) <span>{feature.name}</span></li>
)
})
}
</ul>
</div>
);
}
}

export default App;

Answer Source

Hi in your componentWillMount just do this

componentWillMount() {
   fetch("http://demo6085176.mockable.io/features")
    .then(response => response.json())
    .then(json => {
      console.log(json);
      this.setState({ features: json.features });
   });
}

the response you get from the api is an object which has a key of features which is an array of objects of the data you want.

I hope this helps you, if this is the correct answer kindly mark this answer as done