Core Redux API (Codecademy Store)

Regarding the Core Redux API project which is the Codecademy Store project to be specific, has anyone encountered this problem before?

My problem is SearchTerm component won’t render when I placed it in App.js. I have been debugging this for an hour now, still can’t figure out what causes it not to render. Here is the gist.

After reading your Gist link, I think the issue starts at 16d, from my notes on the project below. I hope that helps. :grimacing:

16d. To filter out the inventory values, you can use this function:

Note: Place the following getFilteredItems function inside of App.js at the bottom of the file.


function getFilteredItems(items, searchTerm) {

return items.filter(items => items.name.toLowerCase().includes(searchTerm.toLowerCase()));

}

16e. The search term now works, but the inventory of items is not filtered out when using our SearchTerm component. Now, in our component, replace the state.inventory with a call to getFilteredItems


// Implement the function below into the Inventory component.

<Inventory

inventory={getFilteredItems(items, searchTerm)}

...

...

/>

16f. For the inputs, in the getFilteredItems function, (in App.js Inventory component, ), consider what to match items and searchTerm with. The current state of items and the current state of searchTerm is what we are going for.


// Implement the function below into the Inventory component.

<Inventory

inventory={getFilteredItems(state.inventory, state.searchTerm)}

...

...

/>

Now check the SearchTerm with by filter out “tee” and we will see three t-shirts.

I faced the same issue.
Insert a .toString() function before the second .toLowerCase(). It should render.

function getFilteredItems(items, searchTerm) {
  return items.filter(items => items.name.toLowerCase().includes(searchTerm.toString().toLowerCase()));
}