Nikita w1 react

[NStefanchuk]

https://ecommerce-react-w1.netlify.app/

• A product list that displays all of the products in the all-products file. Note: the site is responsive, so have a look at the breakpoints in the deployed example project.
• A category list that displays all of the categories in the all-categories file at the top of the page
• If the user clicks on a category only the products that have that category in their category property should be displayed on the screen. Note: The categories listed in the product objects do not match up exactly with the categories in the categories list. You will have to find a solution to this without editing the files
• There should only be 1 category active at a time and the user should see which category is selected.
• You need to deploy your app somewhere (using something like netlify) and put the link in your PR!

[ChingHsun]

All the implementations meet the standards and requirements. However, There is a console error showing up, though. Still might to fixed before approved

[ChingHsun]

Since React 17 and newer versions with the new JSX transform, explicitly importing React in every file is no longer necessary.

Suggested change

import React from 'react'

[ChingHsun]

Suggested change

console.log('selected:', selectedCategory)

While developing, you might find it helpful to install the React Developer Tools extension:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

This tool allows you to easily inspect React component props and state directly in the browser, without needing to use console.log.

[ChingHsun]

Suggested change

	className={`${
	selectedCategory === item ? 'category-item active' : 'category-item'
	}`}
	className={`category-item ${
	selectedCategory === item ? 'active' : ''
	}`}

[ChingHsun]

Suggested change

console.log(selectedCategory)

[ChingHsun]

Suggested change

	<ProductCard item={item} />
	<ProductCard item={item} key={item.id} />

The key prop needs to be placed on the outermost element returned by the .map() function. In this case, that means adding key to the component itself.