Page link: https://nexus20201007.herokuapp.com/shop https://nexus20201007.herokuapp.com/shop/hats so here, what I am trying to accomplish is, if this function finds the object, I am able to map it and show it in a specific address. Her is the shop.selector file:
import { createSelector } from 'reselect';
const selectShop = state => state.shop;
export const selectCollections = createSelector(
[selectShop],
shop => shop.collections
);
export const selectCollectionsForPreview = createSelector(
[selectCollections],
collections => Object.keys(collections).map(key => collections[key])
);
export const selectCollection = collectionUrlParam =>
createSelector(
[selectCollections],
collections => collections[collectionUrlParam]
);
Here is the data file:
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,
linkUrl: 'hats/1'
},
{
id: 2,
name: 'Blue Beanie',
imageUrl: 'https://i.ibb.co/ypkgK0X/blue-beanie.png',
price: 18,
linkUrl: 'hats/2'
},
{
id: 3,
name: 'Brown Cowboy',
imageUrl: 'https://i.ibb.co/QdJwgmp/brown-cowboy.png',
price: 35,
linkUrl: 'hats/3'
},
{
id: 4,
name: 'Grey Brim',
imageUrl: 'https://i.ibb.co/RjBLWxB/grey-brim.png',
price: 25,
linkUrl: 'hats/4'
},
{
id: 5,
name: 'Green Beanie',
imageUrl: 'https://i.ibb.co/YTjW3vF/green-beanie.png',
price: 18,
linkUrl: 'hats/5'
},
{
id: 6,
name: 'Palm Tree Cap',
imageUrl: 'https://i.ibb.co/rKBDvJX/palm-tree-cap.png',
price: 14,
linkUrl: 'hats/6'
},
{
id: 7,
name: 'Red Beanie',
imageUrl: 'https://i.ibb.co/bLB646Z/red-beanie.png',
price: 18,
linkUrl: 'hats/7'
},
{
id: 8,
name: 'Wolf Cap',
imageUrl: 'https://i.ibb.co/1f2nWMM/wolf-cap.png',
price: 14,
linkUrl: 'hats/8'
},
{
id: 9,
name: 'Blue Snapback',
imageUrl: 'https://i.ibb.co/X2VJP2W/blue-snapback.png',
price: 16,
linkUrl: 'hats/9'
}
]
},
sneakers: {
id: 2,
title: 'Sneakers',
routeName: 'sneakers',
items: [
{
id: 10,
name: 'Adidas NMD',
imageUrl: 'https://i.ibb.co/0s3pdnc/adidas-nmd.png',
price: 220,
linkUrl: 'sneakers/10'
},
{
id: 11,
name: 'Adidas Yeezy',
imageUrl: 'https://i.ibb.co/dJbG1cT/yeezy.png',
price: 280,
linkUrl: 'sneakers/11'
},
{
id: 12,
name: 'Black Converse',
imageUrl: 'https://i.ibb.co/bPmVXyP/black-converse.png',
price: 110,
linkUrl: 'sneakers/12'
},
{
id: 13,
name: 'Nike White AirForce',
imageUrl: 'https://i.ibb.co/1RcFPk0/white-nike-high-tops.png',
price: 160,
linkUrl: 'sneakers/13'
},
{
id: 14,
name: 'Nike Red High Tops',
imageUrl: 'https://i.ibb.co/QcvzydB/nikes-red.png',
price: 160,
linkUrl: 'sneakers/14'
},
{
id: 15,
name: 'Nike Brown High Tops',
imageUrl: 'https://i.ibb.co/fMTV342/nike-brown.png',
price: 160,
linkUrl: 'sneakers/15'
},
{
id: 16,
name: 'Air Jordan Limited',
imageUrl: 'https://i.ibb.co/w4k6Ws9/nike-funky.png',
price: 190,
linkUrl: 'sneakers/16'
},
{
id: 17,
name: 'Timberlands',
imageUrl: 'https://i.ibb.co/Mhh6wBg/timberlands.png',
price: 200,
linkUrl: 'sneakers/17'
}
]
},
jackets: {
id: 3,
title: 'Jackets',
routeName: 'jackets',
items: [
{
id: 18,
name: 'Black Jean Shearling',
imageUrl: 'https://i.ibb.co/XzcwL5s/black-shearling.png',
price: 125,
linkUrl: 'jackets/18'
},
{
id: 19,
name: 'Blue Jean Jacket',
imageUrl: 'https://i.ibb.co/mJS6vz0/blue-jean-jacket.png',
price: 90,
linkUrl: 'jackets/19'
},
{
id: 20,
name: 'Grey Jean Jacket',
imageUrl: 'https://i.ibb.co/N71k1ML/grey-jean-jacket.png',
price: 90,
linkUrl: 'jackets/20'
},
{
id: 21,
name: 'Brown Shearling',
imageUrl: 'https://i.ibb.co/s96FpdP/brown-shearling.png',
price: 165,
linkUrl: 'jackets/21'
},
{
id: 22,
name: 'Tan Trench',
imageUrl: 'https://i.ibb.co/M6hHc3F/brown-trench.png',
price: 185,
linkUrl: 'jackets/22'
}
]
},
womens: {
id: 4,
title: 'Womens',
routeName: 'womens',
items: [
{
id: 23,
name: 'Blue Tanktop',
imageUrl: 'https://i.ibb.co/7CQVJNm/blue-tank.png',
price: 25,
linkUrl: 'womens/23'
},
{
id: 24,
name: 'Floral Blouse',
imageUrl: 'https://i.ibb.co/4W2DGKm/floral-blouse.png',
price: 20,
linkUrl: 'womens/24'
},
{
id: 25,
name: 'Floral Dress',
imageUrl: 'https://i.ibb.co/KV18Ysr/floral-skirt.png',
price: 80,
linkUrl: 'womens/25'
},
{
id: 26,
name: 'Red Dots Dress',
imageUrl: 'https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png',
price: 80,
linkUrl: 'womens/26'
},
{
id: 27,
name: 'Striped Sweater',
imageUrl: 'https://i.ibb.co/KmSkMbH/striped-sweater.png',
price: 45,
linkUrl: 'womens/27'
},
{
id: 28,
name: 'Yellow Track Suit',
imageUrl: 'https://i.ibb.co/v1cvwNf/yellow-track-suit.png',
price: 135,
linkUrl: 'womens/28'
},
{
id: 29,
name: 'White Blouse',
imageUrl: 'https://i.ibb.co/qBcrsJg/white-vest.png',
price: 20,
linkUrl: 'womens/29'
}
]
},
mens: {
id: 5,
title: 'Mens',
routeName: 'mens',
items: [
{
id: 30,
name: 'Camo Down Vest',
imageUrl: 'https://i.ibb.co/xJS0T3Y/camo-vest.png',
price: 325,
linkUrl: 'mens/30'
},
{
id: 31,
name: 'Floral T-shirt',
imageUrl: 'https://i.ibb.co/qMQ75QZ/floral-shirt.png',
price: 20,
linkUrl: 'mens/31'
},
{
id: 32,
name: 'Black & White Longsleeve',
imageUrl: 'https://i.ibb.co/55z32tw/long-sleeve.png',
price: 25,
linkUrl: 'mens/32'
},
{
id: 33,
name: 'Pink T-shirt',
imageUrl: 'https://i.ibb.co/RvwnBL8/pink-shirt.png',
price: 25,
linkUrl: 'mens/33'
},
{
id: 34,
name: 'Jean Long Sleeve',
imageUrl: 'https://i.ibb.co/VpW4x5t/roll-up-jean-shirt.png',
price: 40,
linkUrl: 'mens/34'
},
{
id: 35,
name: 'Burgundy T-shirt',
imageUrl: 'https://i.ibb.co/mh3VM1f/polka-dot-shirt.png',
price: 25,
linkUrl: 'mens/35'
}
]
}
};
export default SHOP_DATA;
Currently, these are objects:
and I am trying to replace them with these:
The reason why I used these objects instead of their category, is because I want to make individual product pages, instead of a large category page that includes anything. However, I am not familiar with manipulating items in an array...
Here are the two files relating to structuring the shop data: One is the individual item module: Collection component:
import React from 'react';
import { connect } from 'react-redux';
import CollectionItem from '../../components/collection-item/collection-item.component';
import { selectCollection } from '../../redux/shop/shop.selectors';
import './collection.styles.scss';
const CollectionPage = ({ collection }) => {
const { title, items } = collection;
return (
<div className='collection-page'>
<h2 className='title'>{title}</h2>
<div className='items'>
{items.map(item => (
<CollectionItem key={item.id} item={item} />
))}
</div>
</div>
);
};
const mapStateToProps = (state, ownProps) => ({
collection: selectCollection(ownProps.match.params.collectionId)(state)
});
export default connect(mapStateToProps)(CollectionPage);
the other one Collection Overview component:
import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import CollectionPreview from '../collection-preview/collection-preview.component';
import { selectCollectionsForPreview } from '../../redux/shop/shop.selectors';
import './collections-overview.styles.scss';
const CollectionsOverview = ({ collections }) => (
<div className='collections-overview'>
{collections.map(({ id, ...otherCollectionProps }) => (
<CollectionPreview key={id} {...otherCollectionProps} />
))}
</div>
);
const mapStateToProps = createStructuredSelector({
collections: selectCollectionsForPreview
});
export default connect(mapStateToProps)(CollectionsOverview);
Thanks in advance.
The routing component update:
import React from 'react';
import { Route } from 'react-router-dom';
import CollectionsOverview from '../../components/collections-overview/collections-overview.component';
import CollectionPage from '../collection/collection.component';
const ShopPage = ({ match }) => (
<div className='shop-page'>
<Route exact path={`${match.path}`} component={CollectionsOverview} />
<Route path={`${match.path}/:collectionId`} component={CollectionPage} />
</div>
);
export default ShopPage;
First of all, please paste your code in a text format instead of an image format. And you haven't shown what you are going to do in your question.
Note that
object
in JavaScript acts as a dictionary so that you should access it withkey
but you don't give what the key-value pair you want.