Passing an array of objects through props in React - reactjs

Question

(Solved): Solution was compatibility issues between chart.js and the react version. The recent update to the react version solved it.
I was having trouble finding the solution to this, maybe someone will know why this error is happening:
I am passing an object array via props, but I'm getting an error when it comes to using the prop:
Object array sample (The data for score is fed in through an API and is working):
var teamData = [
{
teamName: "Cowboys",
score: 0,
color: "rgba(0, 34, 68, 0.9)",
},
{
teamName: "Cardinals",
score: 0,
color: "rgba(135, 0, 39, 0.9)",
},
{
teamName: "Patriots",
score: 0,
color: "rgba(0, 21, 50, 0.9)",
},
{
teamName: "49ers",
score: 0,
color: "rgba(170, 0, 0.9)",
},
App.js example
const App = () => {
getData();
return (
<div>
<Header />
<BarChart teamData={teamData} />
<Calculator teamData={teamData} />
<Footer />
</div>
);
};
export default App;
And here is where I pass the props to insert one by one into a chart.js component({props[0].score} is where the error is, it says: SyntaxError C:\Users\name\Documents\Websites\React Based\madden-ranker\src\components\BarChart.js: Unexpected token, expected "," (14:37):
import React from "react";
import { Bar, HorizontalBar } from "react-chartjs-2";
const BarChart = (props) => {
return (
<HorizontalBar
// prettier-ignore
data={{
labels: ['Team1' ],
datasets: [
{
label: 'Cumulative Score',
data: [{props[0].score}, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 10, 20],
backgroundColor: []
},
],
}}
height={500}
width={600}
options={{
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
},
},
}}
/>
);
};
export default BarChart;
Interestingly, I tried console logging it inside the teamData component and got this:
line5: console.log(props);
line6: console.log(props.teamData[0].score);
.

Answer 1

Just add a condition to check if props[0] exists before rendering, cause the first time the props is empty, and when you setstate after getting data from API the component rerenders. Hopefully this helps.

Answer 2

I think you had a few commas in places that they shouldn't be
Try this
const BarChart = (props) => {
return (
<HorizontalBar
// prettier-ignore
data={{
labels: ['Team1' ],
datasets: [
{
label: 'Cumulative Score',
data: [{props[0].score}, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 100, 19, 3, 5, 2, 3, 5, 2, 3, 10, 20],
backgroundColor: []
}
]
}}
height={500}
width={600}
options={{
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
}
}
}}
/>
);
};