'How do I get this Items from my Data using redux-selectors

I have a data inform of an object which has an object also bearing the name of a route name, then inside that object again there is the route name, title and items inside but the items is in array form. Then Using selectors from redux I plug out the dynamic route name inside the data and using a parameter name/path, using params. if you look at the code below the second component I used match.path/:collctionId to match the path of the product am getting from shop and the collectionId which is a parameter, I used redux selectors to match the routeName with the collectionId. So instead of displaying collectionId consistently, I dynamically show the route name base on the route you are.

const Shop = ({ match }) => {
 
    return (
      <div className="shop-page">
        <Route exact path={`${match.path}`} component={collectionOverview} />
        <Route excat path={`${match.path}/:collectionId`} component={collectionPage} />  
    </div>
      
    )
  }

And this is the CollectionPage where am getting the routeName using OwnProps.match.params.collectionId, and display the dynamic routeName which I get from the the selectors..

const CollectionPage = ({ collection }) => {
  const { title, items } = collection;
  return (
    <CollectionPageContainer>
      <CollectionTitle>{title}</CollectionTitle>
      <CollectionItemsContainer>
        {items.map(item => (
          <>
            <CollectionItem key={item.id} item={item} />
          </>
        ))}
      </CollectionItemsContainer>
    </CollectionPageContainer>
  );
};

const mapStateToProps = (state, ownProps) => ({
  collection: selectCollection(ownProps.match.params.collectionId)(state)
});

and below is my dataForm code:

 const SHOP_DATA = {
 hats: {
    id: 1,
    title: 'Hats',
    routeName: 'hats',
    items: [
      {
        _id: 1,
        name: 'Brown Brim',
        imageUrl: 'https://i.ibb.co/ZYW3VTp/brown-brim.png',
        price: 25
      },
      {
        _id: 2,
        name: 'Blue Beanie',
        imageUrl: 'https://i.ibb.co/ypkgK0X/blue-beanie.png',
        price: 18
      },
      {
        _id: 3,
        name: 'Brown Cowboy',
        imageUrl: 'https://i.ibb.co/QdJwgmp/brown-cowboy.png',
        price: 35
      },
      {
        _id: 4,
        name: 'Grey Brim',
        imageUrl: 'https://i.ibb.co/RjBLWxB/grey-brim.png',
        price: 25
      },
      {
        _id: 5,
        name: 'Green Beanie',
        imageUrl: 'https://i.ibb.co/YTjW3vF/green-beanie.png',
        price: 18
      },
      {
        _id: 6,
        name: 'Palm Tree Cap',
        imageUrl: 'https://i.ibb.co/rKBDvJX/palm-tree-cap.png',
        price: 14
      },
      {
        _id: 7,
        name: 'Red Beanie',
        imageUrl: 'https://i.ibb.co/bLB646Z/red-beanie.png',
        price: 18
      },
      {
        _id: 8,
        name: 'Wolf Cap',
        imageUrl: 'https://i.ibb.co/1f2nWMM/wolf-cap.png',
        price: 14
      },
      {
        _id: 9,
        name: 'Blue Snapback',
        imageUrl: 'https://i.ibb.co/X2VJP2W/blue-snapback.png',
        price: 16
      }
    ]
  },
    

But here, I cut the data because it's long to display all the data. But this is the format of the data... So as you can see, I wanted to plug out the Items only using selectors and created a product detail page.. Please help, I have been trying to solve this for over a month pls pls come to my aids and if you need additional information, please let me know. am willing to corporate. Thank you



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source