React js iteration of JSON array is not working - html

Question

i am unable to repeat the row dynamically. when i am using .map method it is showing .map is not a function.
Component
import React, {Component} from 'react';
const pannelWidth = {
width: '90%'
};
const pannelHeader = {
color: 'white'
};
class ProjectList extends Component {
constructor(props) {
super(props);
this.state = {
projectList : ''
}
//this.deleteProjectMessage = this.deleteProjectMessage.bind(this);
}
componentDidMount() {
let d = '';
$.get("http://localhost:8008/api/navigation/all", function (data) {
d = data;
this.setState({
projectList: d
});
}.bind(this));
console.log(this.state.projectList);
}
render() {
var listItems = this.state.projectList.map(function (item, index) {
return <tr>
<td>{item.name}</td>
<td>{item.description}</td>
<td><i className="glyphicon glyphicon-trash"></i></td>
</tr>
});
return(
<div className="container" style={pannelWidth}>
<br/>
<div className="panel panel-primary">
<div className="panel-heading">
<div className="row">
<div className="col-md-2 col-lg-2">
<h4 style={pannelHeader}>Project List</h4>
</div>
<div className="col-md-offset-8 col-lg-offset-8 col-md-2 col-lg-2">
<button className="btn btn-sm btn-success">Create New Project</button>
</div>
</div>
</div>
<div className="panel-body">
<table className="table table-striped">
<thead>
<tr>
<th>Project Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{listItems}
</tbody>
</table>
</div>
</div>
</div>
);
}
}
export default ProjectList;
JSON
[
{
"name": "pro",
"description": "Testing of pro"
},
{
"name": "Test",
"description": "Testing of Test"
}
]
i am calling api from my local system and getting above response and updating the state. then i am trying to render in side table row using map() but it is showing map is not a function in console.

Answer 1

you are defaulting projectList to a string, default it to an empty array.
this.state = {
projectList : '' // should be projectList: []
}
You are making an async request so the initial render of the component is trying to call map on the initial state which is
''.map(function (item, index) {
return <tr>
<td>{item.name}</td>
<td>{item.description}</td>
<td><i className="glyphicon glyphicon-trash"></i></td>
</tr>
});

Answer 2

If the data comes back as a string, you can't map it. You first need to parse the JSON text into a JavaScript array.
d = JSON.parse(data);