SearchBar & Page

README.md

@@ -67,7 +67,7 @@ Free meal planner for cooks short on ideas! (like me …)
 - `React` client on the front-end
 - [Materialize](https://materializecss.com) CSS librairy for styling
 - Public API: [TheMealDb](https://www.themealdb.com/api.php) and [TheCocktailDb](https://www.thecocktaildb.com/api.php)
-- Hosting: anywhere
+- Hosting: [Render](https://render.com/)
 
 ## Versions
 

src/App.js

@@ -166,7 +166,6 @@ const App = () => {
           <SearchPage
             searchString={searchString}
             searchResults={searchResults}
-            // getSearchResults={getSearchResults}
           />
         </Route>
         <Route path="/:idMeal">

src/components/CategoryEntry.js

@@ -13,7 +13,7 @@ const CategoryEntry = props => {
   return (
     <div className="row">
       <Link to={`${url}/${strCategory}`}>
-        <li key={props.i}>
+        <li>
           <img src={strCategoryThumb} alt={strCategory} />
           <h3>{strCategory}</h3> {strCategoryDescription}
         </li>

src/components/SearchBar.js

@@ -5,7 +5,7 @@ const SearchBar = props => {
   return (
     <div className="row">
       <input
-        className="input-field col s9"
+        className="input-field col s10"
         type="text"
         name="search"
         value={props.searchString}
@@ -14,15 +14,13 @@ const SearchBar = props => {
       />
       <Link to="/search">
         <button
-          className="btn waves-effect waves-light right"
+          className="btn-floating waves-effect waves-light  right  "
           type="submit"
           name="searchButton"
           value="Search"
           onClick={props.onSubmit}
         >
-          {" "}
+          <i className="material-icons right">send</i>
-          Search
-          <i class="material-icons right">send</i>
         </button>
       </Link>
     </div>

src/pages/CategoryList.js

@@ -15,7 +15,7 @@ const CategoryListPage = props => {
         <h1>The Chef's Meal Categories</h1>
         <ul>
           {categories.map((category, i) => (
-            <CategoryEntry i={i} category={category} />
+            <CategoryEntry key={i} category={category} />
           ))}
         </ul>
       </div>

src/pages/Search.js

@@ -5,7 +5,6 @@ const SearchPage = props => {
   const { meals } = props.searchResults;
   const { searchString } = props;
 
-  // console.log(meals[0]);
   return (
     <div className="container">
       <h1>Search Results for: {searchString} </h1>