Product List review

[soggybag]

Great work on the product list looks like you solved all of the problems. It all works well. Here are a few suggestions.

Make a folder for components an use a sub-folder for components that rely on other files.

src

• components
  -- App
  --- App.css
  --- App.js
  -- InventoryItem.js
  -- DisplayAllBtn.js
  -- CategoryBtn.js
• index.js
• inventory.js

You have a lot of functions in App.js. Might be good to move these to another file and import them. Cleans up App.js and makes these available everywhere if needed.

You need to do some linting! I see a lot of linter errors/warnings.

Consider destructuring props in InventoryItem. Consider

function InventoryItem({ id, name, price, description }) {
    return (
        <div key={id} className="grid-display three-gi inventory-items">
        <p><strong>{name}</strong></p>
        <p>{price}</p>
        <p >{description}</p>
      </div>      
    )
}
export default InventoryItem;

vs

function InventoryItem(props) {
    return (
        <div key={props.id} className="grid-display three-gi inventory-items">
        <p><strong>{props.name}</strong></p>
        <p>{props.price}</p>
        <p >{ props.description }</p>
      </div>      
    )
}
export default InventoryItem;

I feel like DisplayAllBtn and CategoryBtn are so close you can make a single class. Use a prop to for the category name and give the all button null.