React: Couldn't access properties within data after axios loads. Could it have something to do with params? - json

Question

I'm coding MERN app and I'm almost done with it. However, I am having problems displaying a single customer page with data.
My App.js
import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import CustomersList from "./components/customers-list";
import customerRewards from './components/customerRewards';
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
return (
<Router>
<div className="container">
<div className="header">
<h1>Wow Rewards Program</h1>
</div>
<Route path="/" exact component={CustomersList} />
<Route path='/:id' component={customerRewards} />
</div>
</Router>
);
}
export default App;
My Customer list Component to list customers in main page
import React, { Component } from 'react';
import axios from 'axios';
import CustomerCard from "./customerCard";
class CustomersList extends Component {
constructor(props) {
super(props);
this.state = {
customers: []
}
}
componentDidMount() {
axios.get('http://localhost:5000/customers/')
.then(response => {
this.setState({ customers: response.data });
})
.catch((error) => {
console.log(error);
})
}
render() {
const customers = this.state.customers;
console.log("customerList", customers);
let customersList;
if(!customers) {
customersList = "there is no customer record!";
} else {
customersList = customers.map((customer, k) =>
<CustomerCard customer={customer} key={k} />
);
}
return (
<div>
<h2>Customers List</h2>
<div>
<table>
<thead>
<tr>
<th>Account</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{customersList}
</tbody>
</table>
</div>
</div>
)
}
}
export default CustomersList;
My CustomerCard Component to display each customer
import React from 'react';
import { Link } from 'react-router-dom';
const CustomerCard = (props) => {
const customerCard = props.customer;
return (
<tr>
<td>{customerCard.account}</td>
<td>{customerCard.name}</td>
<td>
<Link to={`/${customerCard.account}`}>view</Link>
</td>
</tr>
)
}
export default CustomerCard;
My Customer Rewards Component to list customer details
import React, { Component } from 'react';
import { Link} from 'react-router-dom';
import '../App.css';
import axios from 'axios';
class customerRewards extends Component {
constructor(props) {
super(props);
this.state = {
customerRewards: {}
};
}
componentDidMount() {
// const { accountId } = this.props.match.params;
console.log("Print id: " + this.props.match.params.id);
axios
.get('http://localhost:5000/customers/'+this.props.match.params.id)
.then(res => {
// console.log("Print-customerRewards-API-response: " + res.data);
this.setState({
customerRewards: res.data
})
})
.catch(err => {
console.log("Error from customerRewards");
})
};
render() {
const customerRewards = this.state.customerRewards;
console.log("customerID", customerRewards);
let CustomerItem = <div>
{customerRewards.purchase_history}
</div>
return (
<div >
<div className="container">
<div className="row">
<div className="col-md-10 m-auto">
<br /> <br />
<Link to="/" className="btn btn-outline-warning float-left">
Back
</Link>
</div>
<br />
<div className="col-md-8 m-auto">
<h1 className="display-4 text-center">Hello {customerRewards.name}</h1>
<p className="lead text-center">
{customerRewards.account}
</p>
<hr /> <br />
</div>
</div>
<div>
{ CustomerItem }
</div>
</div>
</div>
);
}
}
export default customerRewards;
this is my .json sample that I uploaded to MongoDB Atlas:
[
{
"account": "BCE456",
"name": "JohnDoe",
"purchase_history": [
{
"month": "Month01",
"transitions": [
{
"date": "01/01/2010",
"purchase": 120
},
{
"date": "01/01/2010",
"purchase": 120
},
{
"date": "01/01/2010",
"purchase": 120
}
]
},
{
"month": "Month02",
"transitions": [
{
"date": "01/01/2010",
"purchase": 120
},
{
"date": "01/01/2010",
"purchase": 120
},
{
"date": "01/01/2010",
"purchase": 120
}
]
}
]
},
{
"account": "ABC123",
"name": "JohnDoe",
"purchase_history": [
{
"month": "Month01",
"transitions": [
{
"date": "01/01/2010",
"purchase": 120
},
{
"date": "01/01/2010",
"purchase": 120
},
{
"date": "01/01/2010",
"purchase": 120
}
]
},
{
"month": "Month02",
"transitions": [
{
"date": "01/01/2010",
"purchase": 120
},
{
"date": "01/01/2010",
"purchase": 120
},
{
"date": "01/01/2010",
"purchase": 120
}
]
}
]
}
]
I can see that I was able to download the customer details in console.log("customerID", customerRewards); However, when I tried to access {customerRewards.name}, it won't display the name at all....
What am I missing? Could it have something to do with the params that I'm trying to link to? I tried to link by account instead of _id

Answer 1

Your piece of state, customerRewards is an array when it comes from the API. So even when you declare your initial state with an object {}, customerRewards is always going to be an array with one element in this case. Could be an issue in your API response - I'm not familiar with MongoDB Atlas or if it creates access patterns for you but you should be able to configure to return a singular object with a unique ID rather than an array of 1 element.
For now you could do:
this.setState({
customerRewards: res.data[0] /** could do res.data.shift() as well */
})
I would figure out why you are returning an array if there is only supposed to be one element coming back.

Answer 2

just select the element which name you want to get:
customerRewards[0].name