|
@@ -71,7 +71,49 @@ let ProductTable = React.createClass({
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+let SearchBar = React.createClass({
|
|
|
+ name: "SearchBar",
|
|
|
+ componentDidMount: function () {
|
|
|
+ console.log("Component did mountDM", this.name);
|
|
|
+ },
|
|
|
+ getInitialState: function () {
|
|
|
+ console.log("Get Initial State", this.name);
|
|
|
+ return { data: [] };
|
|
|
+ },
|
|
|
+ render: function () {
|
|
|
+ return (
|
|
|
+ <form>
|
|
|
+ <input type="text" placeholder="Search..." />
|
|
|
+ <p>
|
|
|
+ <input type="checkbox" />
|
|
|
+ {' '}
|
|
|
+ Only show products in stock
|
|
|
+ </p>
|
|
|
+ </form>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+let FilterableProductTable = React.createClass({
|
|
|
+ name: "FilterableProductTable",
|
|
|
+ componentDidMount: function () {
|
|
|
+ console.log("Component did mountDM", this.name);
|
|
|
+ },
|
|
|
+ getInitialState: function () {
|
|
|
+ console.log("Get Initial State", this.name);
|
|
|
+ return { data: [] };
|
|
|
+ },
|
|
|
+ render: function () {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <SearchBar />
|
|
|
+ <ProductTable products={this.props.products} />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
ReactDOM.render(
|
|
|
- <ProductTable products={[]} />,
|
|
|
+ <FilterableProductTable products={[]} />,
|
|
|
document.getElementById("content")
|
|
|
);
|