React js iteration of JSON array is not working

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);