TypeError: this.state.customerDetails.data.map is not a function about simple-reactjs-app HOT 2 CLOSED

Hey @Shuhui11

JSON for customer1 should look like this:-

[
{
"id": 1,
"name": "ABCD",
"email": "[email protected]",
"phone": "123456789"
},
{
"id": 2,
"name": "QWER",
"email": "[email protected]",
"phone": "987654321"
},
{
"id": 3,
"name": "ABNSD",
"email": "[email protected]",
"phone": "123412345"
}
]

CustomerDetails should look like this

import React, { Component } from "react";
import Panel from "react-bootstrap/lib/Panel";
import axios from "axios";

//This Component is a child Component of Customers Component
export default class CustomerDetails extends Component {
constructor(props) {
super(props);
this.state = {};
}

//Function which is called when the component loads for the first time
componentDidMount() {
this.getCustomerDetails(this.props.val);
}

//Function which is called whenver the component is updated
componentDidUpdate(prevProps) {
//get Customer Details only if props has changed
if (this.props.val !== prevProps.val) {
this.getCustomerDetails(this.props.val);
}
}

//Function to Load the customerdetails data from json.
getCustomerDetails(id) {
axios.get("assets/samplejson/customer" + id + ".json").then(response => {
this.setState({ customerDetails: response });
});
}

render() {
if (!this.state.customerDetails) return

Loading data

from simple-reactjs-app.

Hi @1209simran

It works! That helps a lot! Thank you for the prompt guidance. I am new and learning.

from simple-reactjs-app.