Skip to content

Instantly share code, notes, and snippets.

/productsreact.js
Created Apr 16, 2016

Embed
What would you like to do?
React try
// components
// SearchableProductTable
// SearchBar
// ProductTable
// ProductRow
var ProductRow = React.createClass({
render: function () {
var row = this.props.product.deleted ?
<tr class="deleted"> :
<tr>;
var buttons = this.props.product.deleted ?
<td></td><td><form id="undelete-form" action="/products/{this.props.product._id}?_method=PUT" method="POST"><input type="hidden" value="false" name="product[deleted]"/><button class="btn">undelete</button></form></td>:
<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editproduct" data-product-id="{this.props.product._id}">Edit</button></td>
<td><form id="delete-form" action="/products/{product._id}?_method=DELETE" method="POST"><button class="btn btn-danger">Delete</button></form></td>
return (
{row}
<td>{this.props.product.ordernumber}</td>
<td>{this.props.product.name}</td>
<td>{this.props.product.description}</td>
<td>{this.props.product.price}</td>
{buttons}
</tr>
)
}
});
var ProductTable = React.createClass({
render: function () {
var rows = [];
this.props.products.forEach (function (product) {
rows.push (<ProductRow product={product}/>)
});
return (
<table class="table" id="productstable">
<thead>
<tr>
<th>#</th>
<th>Product name</th>
<th>description</th>
<th>price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>{rows}</tbody>
)
}
})
var FilterableProductTable = React.createClass({
render: function() {
return (
<div>
<ProductTable products={this.props.products} />
</div>
);
}
});
var PRODUCTS = [
{"_id": "570e932b6349653c3587db28", "name": "Awesome Wooden Bacon", "price": 367.06, "description": "Ullam quis.", "ordernumber": "13", "__v": 0, "deleted": false},
{"_id": "570e932b6349653c3587db29","name": "Ergonomic Fresh Salad","price": 311.37,"description": "Nesciunt.","ordernumber": "7","__v": 0, "deleted": false},
{"_id": "570e932b6349653c3587db2a","name": "Practical Granite Mouse","price": 537.09,"description": "Et.","ordernumber": "109","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db2b","name": "Handcrafted Cotton Pizza","price": 458.55,"description": "Qui fuga sit autem incidunt saepe voluptatum quasi.","ordernumber": "132","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db2c","name": "Incredible Steel Bike","price": 882.45,"description": "Molestias delectus est ducimus ipsa.","ordernumber": "83","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db2d","name": "Fantastic Concrete Fish","price": 29.21,"description": "Aut qui culpa quibusdam a aliquam tempore nemo.","ordernumber": "138","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db2e","name": "Refined Plastic Cheese","price": 592.84,"description": "Quia dicta odit architecto maxime quod.","ordernumber": "199","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db2f","name": "Intelligent Wooden Hat","price": 243.45,"description": "Facere qui id accusamus et.","ordernumber": "95","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db30","name": "Incredible Plastic Chips","price": 666.59,"description": "Rerum et.","ordernumber": "115","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db31","name": "Fantastic Plastic Salad","price": 800.31,"description": "Accusamus sed enim doloremque.","ordernumber": "88","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db32","name": "Handmade Steel Salad","price": 459.55,"description": "Iste.","ordernumber": "158","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db33","name": "Handcrafted Metal Shirt","price": 918.67,"description": "Esse accusamus vel possimus et ullam temporibus.","ordernumber": "115","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db34","name": "Intelligent Metal Computer","price": 787.75,"description": "Animi optio sed asperiores iure vero.","ordernumber": "4","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db35","name": "Generic Metal Towels","price": 740.75,"description": "Asperiores accusantium est veniam ut.","ordernumber": "102","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db36","name": "Handmade Plastic Cheese","price": 404.74,"description": "Eligendi dolores unde non autem.","ordernumber": "119","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db37","name": "Intelligent Wooden Car","price": 680.41,"description": "Facilis eos dolorem sapiente consequuntur.","ordernumber": "172","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db38","name": "Ergonomic Steel Chair","price": 438.69,"description": "Quisquam ea eum perferendis dolorem suscipit atque nihil.","ordernumber": "110","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db39","name": "Fantastic Steel Mouse","price": 739.07,"description": "Suscipit nemo quidem odit et sequi dolorem repellendus.","ordernumber": "79","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db3a","name": "Ergonomic Cotton Shoes","price": 906.24,"description": "Et explicabo asperiores et ut voluptates cupiditate.","ordernumber": "105","__v": 0,"deleted": false},
{"_id": "570e932b6349653c3587db3b","name": "Sleek Steel Chair","price": 952.62,"description": "Pariatur nihil cupiditate ea.","ordernumber": "182","__v": 0,"deleted": false}
];
ReactDOM.render(
<FilterableProductTable products={PRODUCTS} />,
document.getElementById('container')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.