Reputation: 55
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
Upvotes: 2
Views: 172