I have an application that passes array object to a child component and the child component can access the data via "props.data" whose format is as follows: ... Parent component (stateless)
const obj = [];
for(let i=0; i<totalRows; i++){
obj.push({
key: i,
date: new Date(dataObj[i]["properties"]["Date"]).toLocaleString().split(',')[0],
name: dataObj[i]["properties"]["Name"],
total_cases: dataObj[i]["properties"]["Total_Cases"],
cases_today: dataObj[i]["properties"]["Cases_Today"],
tested_today: dataObj[i]["properties"]["TestedToday"],
total_deaths: dataObj[i]["properties"]["Deaths"],
deaths_today: dataObj[i]["properties"]["Deaths_Today"],
});
}
return(
<div>
<div>
// for each name in abbr array, display line charts
{obj &&
abbr.map( name => {
return <DisplayLineChart
key = {name}
data = {obj.filter(obj => obj.name === name)}
... Child component (stateless)
function DisplayLineCharts(props){
...
console.log(props.data[props.data.length-1].total_cases); // error
... doing "console.log(props.data)" returns
246: {key: 3510, date: "10/27/2020", name: "Canada", total_cases: 222887, cases_today: 2674, …}
247: {key: 3522, date: "10/28/2020", name: "Canada", total_cases: 225586, cases_today: 2699, …}
248: {key: 3540, date: "10/29/2020", name: "Canada", total_cases: 228542, cases_today: 2956, …}
249: {key: 3566, date: "10/30/2020", name: "Canada", total_cases: 231999, cases_today: 3457, …}
length: 250
__proto__: Array(0)
I want to get only the last value of "total_cases" (key) and it shows an error that it's undefined when I tried "props.data[props.data.length-1].total_cases" Any idea what would cause this error?
I can get the last object record when "console.log(props.data[props.data.length-1])" as follows:
{key: 3563, date: "10/30/2020", name: "British Columbia", total_cases: 14381, cases_today: 272, …}
cases_today: 272
date: "10/30/2020"
deaths_today: 1
key: 3563
name: "British Columbia"
tested_today: 5488
total_cases: 14381
total_deaths: 263
__proto__: Object
Thank you for your time!
Solved this issue by:
var lastDate = "";
// Date: Name, Total_Cases, Cases_Today, TestedToday, Deaths_Today, Percent_Today, Percent_death, Percent_Recovered
for(var i=0; i<totalRows; i++){
...
if (i===totalRows-1){
lastDate = new Date(dataObj[i]["properties"]["Date"]).toLocaleString().split(',')[0]
}
}
return <DisplayLineChart
key = {name}
data = {obj.filter(obj => obj.name === name)}
name = {name}
totalCase = {obj.filter(obj => obj.name === name && obj.date === lastDate)
.map( obj => {return obj.total_cases;})}
/>;