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

170 Views Asked by At

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

0

There are 0 best solutions below