simplified code, added advice from Atlas7

Author: Oscar Lodriguez

app/main.js

@@ -4,9 +4,9 @@ import {render} from 'react-dom';
 import FilterableProductTable from './src/filterable-product-table';
 
 // init shell
-renderShell();
+initShell();
 
-function renderShell() {
+function initShell() {
     var shell = document.createElement('main');
     shell.className = 'app-shell';
     document.body.appendChild(shell);

app/src/components/category-row.js

@@ -1,9 +1,7 @@
 import React from 'react';
 
-const CategoryRow = ({category}) => (
+export default ({category}) => (
     <tr>
         <th colSpan="2">{category}</th>
     </tr>
-);
-
-export default CategoryRow;
+);

app/src/components/product-row.js

@@ -1,13 +1,11 @@
 import React from 'react';
 
-const ProductRow = ({product}) => {
+export default ({product}) => {
     var name = product.stocked ? product.name : <span style={{color: 'red'}}> {product.name} </span>;
     return (
         <tr>
             <td>{name}</td>
             <td>{product.price}</td>
         </tr>
     );
-};
-
-export default ProductRow;
+};

app/src/components/product-table.js

@@ -4,32 +4,35 @@ import ProductRow from './product-row';
 
 export default ({products, filterText, inStockOnly}) => {
 
-    let rows = [],
-        lastCategory = null;
+    let rows = [], lastCategory = null;
 
     products.map((product) => {
-        if (product.name.indexOf(filterText) === -1 || (!product.stocked && inStockOnly)) {
+        if (product.name.toLowerCase().indexOf(filterText.toLowerCase()) === -1 || (!product.stocked && inStockOnly)) {
             return;
         }
 
         if (product.category !== lastCategory) {
-            rows.push(
-                <CategoryRow category={product.category} key={product.category}/>
-            );
+            rows.push(<CategoryRow category={product.category} key={product.category}/>);
         }
+
         rows.push(<ProductRow product={product} key={product.name}/>);
         lastCategory = product.category;
+
     });
 
-    return (
-        <table>
-            <thead>
-            <tr>
-                <th>Name</th>
-                <th>Price</th>
-            </tr>
-            </thead>
-            <tbody>{rows}</tbody>
-        </table>
-    );
+    if (rows.length > 0) {
+        return (
+            <table>
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Price</th>
+                </tr>
+                </thead>
+                <tbody>{rows}</tbody>
+            </table>
+        );
+    } else {
+        return (<p>No results found</p>);
+    }
 }

app/src/components/search-bar.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, {Component} from 'react';
 
-class SearchBar extends React.Component {
+class SearchBar extends Component {
 
     constructor() {
         super();