React.js Table Component - reactjs

Question

I am creating a pizza app with React.js and would like to display pizza options in a table. I would like to develop my table using like this table, rather than the way i am doing it in choices.js.
Choices.js
return (
<div className="page-wrap">
<table>
<thead>
<tr>
<th>Pizza Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td key={index}>
<a href onClick={this.handleChoice.bind(this, pizza)}>
{pizza.name}</a></td>
</tr>
<tr>
<td>${pizza.price}</td>
</tr>
</tbody>
</table>
</div>
)
});
Options.js
var pizzas = [
{
name: 'Cheese Pizza',
cheese: 'Mozzarella',
toppings: [],
price: 5
},
{
name: 'Papas Special',
cheese: 'Parmesan',
toppings: ['Spinach', 'Lobster', 'Hot Oil'],
price: 50
},
{
name: 'Wild West',
cheese: 'Spicy Mozzarella',
toppings: ['Red Onions', 'Texas Chilli', 'Grilled Chicken'],
price: 25
},
{
name: 'California Pizza',
cheese: 'Mozzarella',
toppings: ['Spinach', 'Guacamole', 'Cherry Tomato'],
price: 25
},
{
name: 'Buffalo Chicken Pizza',
cheese: 'Spicy Blue Cheese',
toppings: ['Red Onions', 'Texas Chilli'],
price: 25
},
{
name: 'Jerk Chicken Pizza',
cheese: 'Mozzarella',
toppings: ['Red Onions', 'Jerk Sauce'],
price: 25
},
{
name: 'Salad Pizza',
cheese: 'Mozzarella',
toppings: ['Red Onions', 'Lettuce', 'Tomato'],
price: 25
}
];

Answer 1

Are you tring to do this? http://jsfiddle.net/dahdx6eu/337/
var cols = [
{ key: 'Name', label: 'Name' },
{ key: 'Cheese', label: 'Cheese' },
{ key: 'Toppings', label: 'Toppings' },
{ key: 'Price', label: 'Price' },
];
var data = [
{
id: 1,
name: 'Cheese Pizza',
cheese: 'Mozzarella',
toppings: [],
price: 5
},
{
id: 2,
name: 'Papas Special',
cheese: 'Parmesan',
toppings: ['Spinach', 'Lobster', 'Hot Oil'],
price: 50
},
{
id: 3,
name: 'Wild West',
cheese: 'Spicy Mozzarella',
toppings: ['Red Onions', 'Texas Chilli', 'Grilled Chicken'],
price: 25
},
{
id: 4,
name: 'California Pizza',
cheese: 'Mozzarella',
toppings: ['Spinach', 'Guacamole', 'Cherry Tomato'],
price: 25
},
{
id: 5,
name: 'Buffalo Chicken Pizza',
cheese: 'Spicy Blue Cheese',
toppings: ['Red Onions', 'Texas Chilli'],
price: 25
},
{
id: 6,
name: 'Jerk Chicken Pizza',
cheese: 'Mozzarella',
toppings: ['Red Onions', 'Jerk Sauce'],
price: 25
},
{
id: 7,
name: 'Salad Pizza',
cheese: 'Mozzarella',
toppings: ['Red Onions', 'Lettuce', 'Tomato'],
price: 25
}
]
var Table = React.createClass({
render: function() {
var headerComponents = this.generateHeaders(),
rowComponents = this.generateRows();
return (
<table>
<thead> {headerComponents} </thead>
<tbody> {rowComponents} </tbody>
</table>
);
},
generateHeaders: function() {
var cols = this.props.cols; // [{key, label}]
// generate our header (th) cell components
return cols.map(function(colData) {
return <th key={colData.key}> {colData.label} </th>;
});
},
generateRows: function() {
var cols = this.props.cols, // [{key, label}]
data = this.props.data;
return data.map(function(item) {
// handle the column data within each row
console.log(item)
return (<tr key={item.id}><td>{item.name}</td><td>{item.cheese}</td><td>{item.toppings} </td><td>{item.price}</td></tr>);
});
}
});