according to this tutorial from 01:46:50 to 01:54:00, I should be able to click on any product and see “HOME > SHOP > men > Men Green Solid…” on top of page, but after I click any product there is no “HOME > SHOP > men > Men Green Solid…” and it just shows footer and navbar. Basically the product information is empty.
After reading the comments, I saw at least 2 people who have the same problem.
I re-watched the video several times to make sure I was doing everything correctly and exactly according to the video, but I didn’t manage to solve the problem.
//Product.jsx =>
import React, { useContext } from 'react'
import { ShopContext } from '../Context/ShopContext'
import { useParams } from 'react-router-dom';
import Breadcrum from '../Components/Breadcrums/Breadcrum';
const Product = () => {
const {all_product}= useContext(ShopContext);
const {productId} = useParams();
const product = all_product.find((e)=> e.id === Number(productId));
return (
<div>
<Breadcrum product={product}/>
</div>
)
}
export default Product
//Breadcrum.jsx =>
import React from 'react'
import './Breadcrum.css'
import arrow_icon from '../Assets/breadcrum_arrow.png'
const Breadcrum = (props) => {
const {product} = props;
return (
<div className='breadcrum'>
HOME <img src={arrow_icon} alt="" /> SHOP <img src={arrow_icon} alt="" /> {product.category} <img src={arrow_icon} alt="" /> {product.name}
</div>
)
}
export default Breadcrum
//ShopContext.jsx =>
import React, { createContext } from "react";
import all_product from '../Components/Assets/all_product';
export const ShopContext = createContext(null);
const ShopContextProvider = (props) => {
const contextValue = {all_product}
return (
<ShopContext.Provider value={contextValue}>
{props.children}
</ShopContext.Provider>
)
}
export default ShopContextProvider;
