user3574939 user3574939 -4 years ago 208
React JSX Question

React.js Table Component

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 Source

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>);
        });
    }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download