linjiang82/index.html

## index.html
<html>
<head>
  </head>
<body>
  <div id='wrapper'>
  </div>
</body></html>

## product-list-using-react.markdown

      
    Raw
  

              product-list-using-react.markdown
            
          
    Product List using React

A Pen by John Lin on CodePen.
License.

  
## script.babel
function Searchbar(props){
  return (
    <form>
      <input type="text" placeholder="search..." onChange={props.onChange}/><br/>
      <input type="checkbox" onChange={props.onChange}/>Only show products in stock
    </form>
  );
}
function ProductRow(props){
  let name=props.product.name;
  if(name.includes(props.searchText))
  {if(props.checked && !props.product.stocked)
    return null;
  if(!props.product.stocked) {
    name=<span style={{color:'red'}}>{props.product.name}</span>
  };
  return (
    <tr>
      <td>{name}</td>
      <td>{props.product.price}</td>
    </tr>
  );
}
else
  return null;
}
function ProductCategoryRow(props){
  return (
    <tr><td style={{fontWeight:'bold'}}>{props.product.category}</td></tr>
  );
}
function ProductTable(props){
  let rows=[];
  let lastCategory=null;
  props.product.forEach(function(product){
     if(lastCategory!==product.category)
      rows.push(<ProductCategoryRow product={product} />);

      rows.push(<ProductRow product={product} checked={props.checked} searchText={props.searchText}/>);
      lastCategory = product.category;
  });
  return (
    <table>
      <tr>
        <th>Name</th>
        <th>Price</th>
      </tr>
      <tbody>{rows}</tbody>
     </table>
  );
}

class Product extends React.Component {
constructor(props){
  super(props);
  this.state={
    searchText:"",
    checked:false,
  };
  this.handleChange = this.handleChange.bind(this);
 // this.hanldChecked = this.handleChecked.bind(this);
}
  handleChange(e){
    e.target.type=="checkbox"? this.setState({checked:e.target.checked}):this.setState({searchText:e.target.value});
  }
  // handleChecked(e){
  //   this.setState({checked:e.target.checked});
  // }
render(){
  let PRODUCTS=[
  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
  return(
    <div>
    <Searchbar onChange={this.handleChange} />
    <ProductTable product={PRODUCTS} checked={this.state.checked} searchText={this.state.searchText}/>
    </div>

  );
}
}

ReactDOM.render(
        <Product />,
        document.getElementById('wrapper')
        );

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
	<html>
	<head>
	</head>
	<body>
	<div id='wrapper'>
	</div>
	</body></html>
	function Searchbar(props){
	return (
	<form>
	<input type="text" placeholder="search..." onChange={props.onChange}/><br/>
	<input type="checkbox" onChange={props.onChange}/>Only show products in stock
	</form>
	);
	}
	function ProductRow(props){
	let name=props.product.name;
	if(name.includes(props.searchText))
	{if(props.checked && !props.product.stocked)
	return null;
	if(!props.product.stocked) {
	name=<span style={{color:'red'}}>{props.product.name}</span>
	};
	return (
	<tr>
	<td>{name}</td>
	<td>{props.product.price}</td>
	</tr>
	);
	}
	else
	return null;
	}
	function ProductCategoryRow(props){
	return (
	<tr><td style={{fontWeight:'bold'}}>{props.product.category}</td></tr>
	);
	}
	function ProductTable(props){
	let rows=[];
	let lastCategory=null;
	props.product.forEach(function(product){
	if(lastCategory!==product.category)
	rows.push(<ProductCategoryRow product={product} />);

	rows.push(<ProductRow product={product} checked={props.checked} searchText={props.searchText}/>);
	lastCategory = product.category;
	});
	return (
	<table>
	<tr>
	<th>Name</th>
	<th>Price</th>
	</tr>
	<tbody>{rows}</tbody>
	</table>
	);
	}

	class Product extends React.Component {
	constructor(props){
	super(props);
	this.state={
	searchText:"",
	checked:false,
	};
	this.handleChange = this.handleChange.bind(this);
	// this.hanldChecked = this.handleChecked.bind(this);
	}
	handleChange(e){
	e.target.type=="checkbox"? this.setState({checked:e.target.checked}):this.setState({searchText:e.target.value});
	}
	// handleChecked(e){
	// this.setState({checked:e.target.checked});
	// }
	render(){
	let PRODUCTS=[
	{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
	{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
	{category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
	{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
	{category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
	{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
	];
	return(
	<div>
	<Searchbar onChange={this.handleChange} />
	<ProductTable product={PRODUCTS} checked={this.state.checked} searchText={this.state.searchText}/>
	</div>

	);
	}
	}

	ReactDOM.render(
	<Product />,
	document.getElementById('wrapper')
	);
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>