Get item details react/redux hooks - reactjs

Question

I'm building an eCommerce project using hooks for Redux and React and I'm stumped on how to get the individual details for each item. When I click on the item, I only retrieve the details of the first item in the array no matter which item is clicked with the current set up. When I use state.products.find(item => item.id === item) instead of the code below for details const, I get a TypeError: Cannot read property x of undefined. Any help is appreciated.
function App() {
return (
<Provider store={store}>
<Navbar/>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path='/products' component={Products}/>
<Route exact path="/products/:prodId" component={ProductDetail}/>
<Route exact path="/cart" component={Cart}/>
</Switch>
</Provider>
);
}
Reducer
const initialState = {
items:[],
prodId: {},
count: 0
}
export default function (state = initialState, {payload,type}){
switch(type){
case types.GET_PRODUCTS:
return{
...state,
items: payload,
}
case types.GET_ITEM:
return{
...state,
prodId: payload
}
default:
return state;
}
}
Actions
const api = 'http://localhost:8000/products'
export const getProds = ()=> dispatch =>{
console.log('fethcin')
fetch(api)
.then(res =>res.json())
.then(data => {
// return {type: GET_PRODUCTS, payload:data}
dispatch({type: types.GET_PRODUCTS, payload:data});
}
)
}
export const getDetails = id => dispatch => {
dispatch({type: types.GET_ITEM, payload: id})
}
Product
const Product = ({product}) => {
const dispatch = useDispatch()
const {id, title, price, isFreeShipping} = product
return (
<div className='prod-container'>
<div className="product">
<h2 className='prod-title'>{title}</h2>
<p className='prod-price'>{price}</p>
<span className='prod-ship'>{isFreeShipping}</span>
<button onClick={()=> dispatch(getDetails(id))}><Link to={{pathname:`/products/${id}`}}> View More </Link> </button>
{/* <button className='btn prod-details'>View Item</button> */}
</div>
</div>
)
}
Details
const ProductDetail = ({match}) => {
const product = match.params.prodId
const details = useSelector(state => state.products.items.find(item => item.id === product))
const {sku, count, title, description, availableSizes, price, isFreeShipping} = details
return (
<div className='prodDetaul'>
<p>{title}</p>
<p>{description}</p>
<p>{price}</p>
<p>{isFreeShipping}</p>
<p>{availableSizes}</p>
<p>{sku}</p>
<Counter count={count}/>
<button className='btn btn-chkot'><Link to='/cart'>Cart</Link></button>
</div>
)
}

Answer 1

The problem is with this line:
const details = useSelector(state => state.products.items.find(item => item.id))
What the statement means basically is:
Find the first item in state.products.items that has an id.
You actually need to pass in a parameter, say, the ID of the clicked item. Could be like this:
const details = useSelector(state => state.products.items.find(item => item.id === myItemId))
Since you're using react-router, you can get the product ID with props.match.params.id.
The final solution:
const ProductDetail = ({ match }) => {
const productId = match.params.id
const details = useSelector(state => state.products.items.find(item => item.id === productId))
// ...
}