Trouble displaying item specifics in my React-based online shop - no console errors

Ecom
1

I’m building an online store with React. The problem is I can’t get the item details to show up on my local server. I tried using the useparams method but got an undefined params error. Here’s a simplified version of my code:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchItemInfo } from './storeActions';

const ItemInfo = ({ match }) => {
  const dispatch = useDispatch();
  const { item, isLoading, errorMsg } = useSelector(state => state.itemInfo);

  useEffect(() => {
    console.log('Getting item info...');
    if (match?.params?.id) {
      dispatch(fetchItemInfo(match.params.id));
    }
  }, [dispatch, match]);

  console.log('Item info:', item);

  return <h2>{item?.title}</h2>;
};

export default ItemInfo;

I’m using Redux for state management. The fetchItemInfo action makes an API call to get the item details. But nothing shows up on the page even though there are no errors in the console. Any ideas what might be wrong?

2

Based on your code, it seems the issue might be related to how you’re passing the ‘match’ prop to your ItemInfo component. In newer versions of React Router, ‘match’ isn’t automatically provided. Instead, you should use the useParams hook.

Try modifying your component like this:

import { useParams } from 'react-router-dom';

const ItemInfo = () => {
  const { id } = useParams();
  const dispatch = useDispatch();
  // ... rest of your code

  useEffect(() => {
    if (id) {
      dispatch(fetchItemInfo(id));
    }
  }, [dispatch, id]);

  // ... rest of your component
}

This should resolve the undefined params error. If you’re still not seeing the item details, double-check that your API call in fetchItemInfo is working correctly and that the data is being properly stored in your Redux state.

3

hey dancingbutterfly, ur code looks good but maybe check if the api call is actually working? try console.logging the response in ur fetchItemInfo action. also, make sure ur router setup is correct. sometimes that can mess things up. if nothing else works, try clearing ur browser cache and restarting the dev server. good luck!

4

Hey there, DancingButterfly! :butterfly:

Hmm, that’s a tricky one. Have you tried using React DevTools to see what’s going on with your state? Sometimes it can be super helpful to visualize what’s actually in there.

Also, I’m wondering - are you sure the API call is successful? Maybe try adding a .catch() to your fetchItemInfo action to see if there are any errors that aren’t showing up in the console.

Oh, and one more thing - how are you rendering the ItemInfo component? Are you wrapping it in a Route component from react-router-dom? That could explain why you’re not getting the match prop.

What do you think? Have you tried any of these yet? I’m really curious to hear more about your project!