React try

productsreact.js

// 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')
);