Iterate through a dictionary with React to construct a Table - reactjs

Question

I want to iterate a dictionary to construct a table using React, but I am stuck with this error:
PricingPlanTable.jsx:33 Uncaught TypeError: Cannot read property 'map'
of undefined
Here's my code:
BillingAccount.jsx
import React, { PropTypes, Component } from 'react';
import PricingPlanTable from './PricingPlanTable';
export default class BillingAccount extends React.Component {
render() {
var pricingPlans = {
'planNames': ['Starter', 'Bronze', 'Silver', 'Gold', 'Enterprise'],
'planPrices': ['free', '$10', '$25', '$49', 'Contact Us'],
'planOptions': [
{'option': 'A', 'values': ['1', '2', '3', '4', '5']},
{'option': 'B', 'values': ['1', '2', '3', '4', '5']},
{'option': 'C', 'values': ['1', '2', '3', '4', '5']}
]
};
return (
<div>
<PricingPlanTable table={pricingPlans}/>
</div>
);
}
}
PricingPlanTable.jsx
import React, { PropTypes, Component } from 'react';
export default class PricingPlanTable extends React.Component {
render() {
const table = this.props.table.map((table, i) => {
return (
<div key={i}>
<table>
<tbody>
<tr>
<th></th>
<th>Starter</th>
<th>Bronze</th>
<th>Silver</th>
<th>Gold</th>
<th>Enterprise</th>
</tr>
<tr>
<td></td>
<td>free</td>
<td>19€ /mo</td>
<td>79€ /mo</td>
<td>190€ /mo</td>
<td>custom</td>
</tr>
</tbody>
</table>
</div>
)})
return (
<div>
{table}
</div>
);
}
}
This is a mockup of what I am trying to achieve:
The PricingPlanTable.jsx has the table hardcoded but I am trying to use the 'this.props' functionality of React to iterate through it. I would like to use a skeleton of the template and populate it with the pricingPlans var from the BillingAccount.jsx file.

Answer 1

pricingPlans that you are passing as a prop is an object and cannot be iterated over. You would need to access each object within pricing plans since they actually contain an array and iterate over them.
Please look at the following documenatation on how to use Array.map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
So with your current data structure you could do something like the following :
createHeaders() {
this.props.table.planNames.map((plan) => {
return <th>{plan}</th>
});
}
createContent() {
this.props.table.planPrices.map((price) => {
return <tr>{price}</tr>
});
}
render() {
const table = this.props.table;
return(
<table>
<tr>
{this.createHeaders}
</tr>
<tr>
{this.createContent}
</tr>
</table>
)
}

Answer 2

At first you should use an array with map.Use map in planOptions instead. Secondly in map you are returning the table again and again rather you must return only rows. This is what it should be like.
import React, { PropTypes, Component } from 'react';
export default class PricingPlanTable extends React.Component {
render() {
const table = this.props.table.planOptions.map((obj, i) => {
return (
<tr key={i}>
<td>{obj.option}</td>
{obj.value.map(value => {
return (
<td>{value}</td>
);
})}
</tr>
)})
return (
<div>
<table>
<tbody>
<tr>
<th></th>
<th>Starter</th>
<th>Bronze</th>
<th>Silver</th>
<th>Gold</th>
<th>Enterprise</th>
</tr>
<tr>
<td></td>
<td>free</td>
<td>19€ /mo</td>
<td>79€ /mo</td>
<td>190€ /mo</td>
<td>custom</td>
</tr>
{tbody}
</tbody>
</table>
</div>
);
}
}