how to extract data from react js nested array js file?
Question
i have an array called shop data . it include a data for hats , sneakers , jackets , men and womens . it should include the name , price and image of only first 4 items of of every kind. I mean first 4 types of hats, 4 types of jackets, etc
const SHOP_DATA = [
{
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
}
]
},
{
id: 2,
title: 'Sneakers',
routeName: 'sneakers',
items: [
{
id: 10,
name: 'Adidas NMD',
imageUrl: 'https://i.ibb.co/0s3pdnc/adidas-nmd.png',
price: 220
},
{
id: 11,
name: 'Adidas Yeezy',
imageUrl: 'https://i.ibb.co/dJbG1cT/yeezy.png',
price: 280
},
{
id: 12,
name: 'Black Converse',
imageUrl: 'https://i.ibb.co/bPmVXyP/black-converse.png',
price: 110
},
{
id: 13,
name: 'Nike White AirForce',
imageUrl: 'https://i.ibb.co/1RcFPk0/white-nike-high-tops.png',
price: 160
},
{
id: 14,
name: 'Nike Red High Tops',
imageUrl: 'https://i.ibb.co/QcvzydB/nikes-red.png',
price: 160
},
{
id: 15,
name: 'Nike Brown High Tops',
imageUrl: 'https://i.ibb.co/fMTV342/nike-brown.png',
price: 160
},
{
id: 16,
name: 'Air Jordan Limited',
imageUrl: 'https://i.ibb.co/w4k6Ws9/nike-funky.png',
price: 190
},
{
id: 17,
name: 'Timberlands',
imageUrl: 'https://i.ibb.co/Mhh6wBg/timberlands.png',
price: 200
}
]
},
{
id: 3,
title: 'Jackets',
routeName: 'jackets',
items: [
{
id: 18,
name: 'Black Jean Shearling',
imageUrl: 'https://i.ibb.co/XzcwL5s/black-shearling.png',
price: 125
},
{
id: 19,
name: 'Blue Jean Jacket',
imageUrl: 'https://i.ibb.co/mJS6vz0/blue-jean-jacket.png',
price: 90
},
{
id: 20,
name: 'Grey Jean Jacket',
imageUrl: 'https://i.ibb.co/N71k1ML/grey-jean-jacket.png',
price: 90
},
{
id: 21,
name: 'Brown Shearling',
imageUrl: 'https://i.ibb.co/s96FpdP/brown-shearling.png',
price: 165
},
{
id: 22,
name: 'Tan Trench',
imageUrl: 'https://i.ibb.co/M6hHc3F/brown-trench.png',
price: 185
}
]
},
{
id: 4,
title: 'Womens',
routeName: 'womens',
items: [
{
id: 23,
name: 'Blue Tanktop',
imageUrl: 'https://i.ibb.co/7CQVJNm/blue-tank.png',
price: 25
},
{
id: 24,
name: 'Floral Blouse',
imageUrl: 'https://i.ibb.co/4W2DGKm/floral-blouse.png',
price: 20
},
{
id: 25,
name: 'Floral Dress',
imageUrl: 'https://i.ibb.co/KV18Ysr/floral-skirt.png',
price: 80
},
{
id: 26,
name: 'Red Dots Dress',
imageUrl: 'https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png',
price: 80
},
{
id: 27,
name: 'Striped Sweater',
imageUrl: 'https://i.ibb.co/KmSkMbH/striped-sweater.png',
price: 45
},
{
id: 28,
name: 'Yellow Track Suit',
imageUrl: 'https://i.ibb.co/v1cvwNf/yellow-track-suit.png',
price: 135
},
{
id: 29,
name: 'White Blouse',
imageUrl: 'https://i.ibb.co/qBcrsJg/white-vest.png',
price: 20
}
]
},
{
id: 5,
title: 'Mens',
routeName: 'mens',
items: [
{
id: 30,
name: 'Camo Down Vest',
imageUrl: 'https://i.ibb.co/xJS0T3Y/camo-vest.png',
price: 325
},
{
id: 31,
name: 'Floral T-shirt',
imageUrl: 'https://i.ibb.co/qMQ75QZ/floral-shirt.png',
price: 20
},
{
id: 32,
name: 'Black & White Longsleeve',
imageUrl: 'https://i.ibb.co/55z32tw/long-sleeve.png',
price: 25
},
{
id: 33,
name: 'Pink T-shirt',
imageUrl: 'https://i.ibb.co/RvwnBL8/pink-shirt.png',
price: 25
},
{
id: 34,
name: 'Jean Long Sleeve',
imageUrl: 'https://i.ibb.co/VpW4x5t/roll-up-jean-shirt.png',
price: 40
},
{
id: 35,
name: 'Burgundy T-shirt',
imageUrl: 'https://i.ibb.co/mh3VM1f/polka-dot-shirt.png',
price: 25
}
]
}
];
export default SHOP_DATA;
i need to make a collection page which include 4 items of each type using map function
i created that function to extract props
import React from 'react';
const CollectionExtract = (props) => {
return (
<div>
{props.name}
{props.imageUrl}
{props.price}
</div>
);
};
export default CollectionExtract;props
i feel stuck and don't know the right way to loop through the elements
5 answers
solution1
2 ACCPTED 2020-11-22 19:14:09
You can use map to iterate through your array of "categories" then use splice to get the first four items in the items array.
function getFirstFourItems() {
return SHOP_DATA.map((category) => {
return {...category, items: category.items.slice(0,4)}
})
}
One way to display it in a component could look something like this:
const Products = () => {
return (
<div>
{SHOP_DATA.map((category) => {
return (
<div key={category.id}>
<h1>{category.title}</h1>
{category.items.slice(0,4).map(item => <CollectionExtract {...item}/>)}
</div>
)
})}
</div>
)
}
solution2
0 2020-11-22 19:29:40
It seems that with your current data you have an array of 5 elements (Hats, Sneakers, Jackets, Womens and Mens), each with an array of items in it.
If I understand this correctly, you want to create a page of all the entries in the first array with 4 of their own items, correct?
For this case your best friend is the .map() function.
Let us think about the main array first. You will want to go through it and render each of it's items as you see fit. This will look like something like this, supposing we want to render just the title
const App = () => {
return (
<div>
{SHOP_DATA.map((category) => <p key={category.id}>{category.title}</p>)}
</div>
)
}
Now... You also want to render 4 of the items that each category has, so a way to go around this is to have a secondary map within the first one, called on the items property. This will look something like this:
const App = () => {
return (
<div>
{SHOP_DATA.map((category) => (
<div key={category.id}>
<h3>{category.title}</h3>
{category.items.map((item) => {
return (
<div>
{item.name}
</div>
)
})}
</div>
))}
</div>
)
}
For the last part, you say you only want the 4 first items to be rendered. For this, we can still pretty much keep what we already have but use the .slice() function to only render 4 items as opposed to the whole array:
const App = () => {
return (
<div>
{SHOP_DATA.map((category) => {
const first4Items = category.items.slice(0, 4)
return (
<div key={category.id}>
<h3>{category.title}</h3>
{first4Items.map((item) => {
return (
<div>
{item.name}
</div>
)
})}
</div>
)
})}
</div>
)
}
This here obviously will only render the name of the item, so I'll incorporate your component to be used in its place and render all properties you want it to:
const CollectionExtract = (props) => {
return (
<div>
<p>Name: {props.name}</p>
<p>Image URL: {props.imageUrl}</p>
<p>Price: {props.price}</p>
</div>
);
};
const App = () => {
return (
<div>
{SHOP_DATA.map((category) => {
const first4Items = category.items.slice(0, 4)
return (
<div key={category.id}>
<h3>{category.title}</h3>
{first4Items.map((item) => {
return (
<CollectionExtract
name={item.name}
imageUrl={item.imageUrl}
price={item.price}
/>
)
})}
</div>
)
})}
</div>
)
}
With all that being said here is a fully functional sample app:
const SHOP_DATA = [ { 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 } ] }, { id: 2, title: 'Sneakers', routeName: 'sneakers', items: [ { id: 10, name: 'Adidas NMD', imageUrl: 'https://i.ibb.co/0s3pdnc/adidas-nmd.png', price: 220 }, { id: 11, name: 'Adidas Yeezy', imageUrl: 'https://i.ibb.co/dJbG1cT/yeezy.png', price: 280 }, { id: 12, name: 'Black Converse', imageUrl: 'https://i.ibb.co/bPmVXyP/black-converse.png', price: 110 }, { id: 13, name: 'Nike White AirForce', imageUrl: 'https://i.ibb.co/1RcFPk0/white-nike-high-tops.png', price: 160 }, { id: 14, name: 'Nike Red High Tops', imageUrl: 'https://i.ibb.co/QcvzydB/nikes-red.png', price: 160 }, { id: 15, name: 'Nike Brown High Tops', imageUrl: 'https://i.ibb.co/fMTV342/nike-brown.png', price: 160 }, { id: 16, name: 'Air Jordan Limited', imageUrl: 'https://i.ibb.co/w4k6Ws9/nike-funky.png', price: 190 }, { id: 17, name: 'Timberlands', imageUrl: 'https://i.ibb.co/Mhh6wBg/timberlands.png', price: 200 } ] }, { id: 3, title: 'Jackets', routeName: 'jackets', items: [ { id: 18, name: 'Black Jean Shearling', imageUrl: 'https://i.ibb.co/XzcwL5s/black-shearling.png', price: 125 }, { id: 19, name: 'Blue Jean Jacket', imageUrl: 'https://i.ibb.co/mJS6vz0/blue-jean-jacket.png', price: 90 }, { id: 20, name: 'Grey Jean Jacket', imageUrl: 'https://i.ibb.co/N71k1ML/grey-jean-jacket.png', price: 90 }, { id: 21, name: 'Brown Shearling', imageUrl: 'https://i.ibb.co/s96FpdP/brown-shearling.png', price: 165 }, { id: 22, name: 'Tan Trench', imageUrl: 'https://i.ibb.co/M6hHc3F/brown-trench.png', price: 185 } ] }, { id: 4, title: 'Womens', routeName: 'womens', items: [ { id: 23, name: 'Blue Tanktop', imageUrl: 'https://i.ibb.co/7CQVJNm/blue-tank.png', price: 25 }, { id: 24, name: 'Floral Blouse', imageUrl: 'https://i.ibb.co/4W2DGKm/floral-blouse.png', price: 20 }, { id: 25, name: 'Floral Dress', imageUrl: 'https://i.ibb.co/KV18Ysr/floral-skirt.png', price: 80 }, { id: 26, name: 'Red Dots Dress', imageUrl: 'https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png', price: 80 }, { id: 27, name: 'Striped Sweater', imageUrl: 'https://i.ibb.co/KmSkMbH/striped-sweater.png', price: 45 }, { id: 28, name: 'Yellow Track Suit', imageUrl: 'https://i.ibb.co/v1cvwNf/yellow-track-suit.png', price: 135 }, { id: 29, name: 'White Blouse', imageUrl: 'https://i.ibb.co/qBcrsJg/white-vest.png', price: 20 } ] }, { id: 5, title: 'Mens', routeName: 'mens', items: [ { id: 30, name: 'Camo Down Vest', imageUrl: 'https://i.ibb.co/xJS0T3Y/camo-vest.png', price: 325 }, { id: 31, name: 'Floral T-shirt', imageUrl: 'https://i.ibb.co/qMQ75QZ/floral-shirt.png', price: 20 }, { id: 32, name: 'Black & White Longsleeve', imageUrl: 'https://i.ibb.co/55z32tw/long-sleeve.png', price: 25 }, { id: 33, name: 'Pink T-shirt', imageUrl: 'https://i.ibb.co/RvwnBL8/pink-shirt.png', price: 25 }, { id: 34, name: 'Jean Long Sleeve', imageUrl: 'https://i.ibb.co/VpW4x5t/roll-up-jean-shirt.png', price: 40 }, { id: 35, name: 'Burgundy T-shirt', imageUrl: 'https://i.ibb.co/mh3VM1f/polka-dot-shirt.png', price: 25 } ] } ]; const CollectionExtract = (props) => { return ( <div> <p>Name: {props.name}</p> <p>Image URL: {props.imageUrl}</p> <p>Price: {props.price}</p> </div> ); }; const App = () => { return ( <div> {SHOP_DATA.map((category) => { const first4Items = category.items.slice(0, 4) return ( <div key={category.id}> <h3>{category.title}</h3> {first4Items.map((item) => { return ( <CollectionExtract name={item.name} imageUrl={item.imageUrl} price={item.price} /> ) })} </div> ) })} </div> ) } ReactDOM.render( <App />, document.getElementById('app') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>
solution3
0 2020-11-22 19:39:21
i encourage you to create a component and pass the props to it, in my solution i return a simple html for demonstration purposes.
let content = '';
if(data.length) {
content = data.map(item => {
const {items, title, id} = item || {};
return (
<div key={id}>
{title}
<ul>
{items.slice(0,4).map(item =>{
const {imageUrl, price, name} = item || {}
return(
<>
<li>image : <img src={imageUrl} alt={name}/></li>
<li>price : <p>{price} </p></li>
</>
)
} )}
</ul>
</div>
)
})
}
After that i will give you four items from each items array and with the category above, hats, men, womens...
you final step is to return the content in jsx return statement
The data variables is to bes set to :
const [data, setDtata] = useState(
[
{
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
}
]
},
{
id: 2,
title: 'Sneakers',
routeName: 'sneakers',
items: [
{
id: 10,
name: 'Adidas NMD',
imageUrl: 'https://i.ibb.co/0s3pdnc/adidas-nmd.png',
price: 220
},
{
id: 11,
name: 'Adidas Yeezy',
imageUrl: 'https://i.ibb.co/dJbG1cT/yeezy.png',
price: 280
},
{
id: 12,
name: 'Black Converse',
imageUrl: 'https://i.ibb.co/bPmVXyP/black-converse.png',
price: 110
},
{
id: 13,
name: 'Nike White AirForce',
imageUrl: 'https://i.ibb.co/1RcFPk0/white-nike-high-tops.png',
price: 160
},
{
id: 14,
name: 'Nike Red High Tops',
imageUrl: 'https://i.ibb.co/QcvzydB/nikes-red.png',
price: 160
},
{
id: 15,
name: 'Nike Brown High Tops',
imageUrl: 'https://i.ibb.co/fMTV342/nike-brown.png',
price: 160
},
{
id: 16,
name: 'Air Jordan Limited',
imageUrl: 'https://i.ibb.co/w4k6Ws9/nike-funky.png',
price: 190
},
{
id: 17,
name: 'Timberlands',
imageUrl: 'https://i.ibb.co/Mhh6wBg/timberlands.png',
price: 200
}
]
},
{
id: 3,
title: 'Jackets',
routeName: 'jackets',
items: [
{
id: 18,
name: 'Black Jean Shearling',
imageUrl: 'https://i.ibb.co/XzcwL5s/black-shearling.png',
price: 125
},
{
id: 19,
name: 'Blue Jean Jacket',
imageUrl: 'https://i.ibb.co/mJS6vz0/blue-jean-jacket.png',
price: 90
},
{
id: 20,
name: 'Grey Jean Jacket',
imageUrl: 'https://i.ibb.co/N71k1ML/grey-jean-jacket.png',
price: 90
},
{
id: 21,
name: 'Brown Shearling',
imageUrl: 'https://i.ibb.co/s96FpdP/brown-shearling.png',
price: 165
},
{
id: 22,
name: 'Tan Trench',
imageUrl: 'https://i.ibb.co/M6hHc3F/brown-trench.png',
price: 185
}
]
},
{
id: 4,
title: 'Womens',
routeName: 'womens',
items: [
{
id: 23,
name: 'Blue Tanktop',
imageUrl: 'https://i.ibb.co/7CQVJNm/blue-tank.png',
price: 25
},
{
id: 24,
name: 'Floral Blouse',
imageUrl: 'https://i.ibb.co/4W2DGKm/floral-blouse.png',
price: 20
},
{
id: 25,
name: 'Floral Dress',
imageUrl: 'https://i.ibb.co/KV18Ysr/floral-skirt.png',
price: 80
},
{
id: 26,
name: 'Red Dots Dress',
imageUrl: 'https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png',
price: 80
},
{
id: 27,
name: 'Striped Sweater',
imageUrl: 'https://i.ibb.co/KmSkMbH/striped-sweater.png',
price: 45
},
{
id: 28,
name: 'Yellow Track Suit',
imageUrl: 'https://i.ibb.co/v1cvwNf/yellow-track-suit.png',
price: 135
},
{
id: 29,
name: 'White Blouse',
imageUrl: 'https://i.ibb.co/qBcrsJg/white-vest.png',
price: 20
}
]
},
{
id: 5,
title: 'Mens',
routeName: 'mens',
items: [
{
id: 30,
name: 'Camo Down Vest',
imageUrl: 'https://i.ibb.co/xJS0T3Y/camo-vest.png',
price: 325
},
{
id: 31,
name: 'Floral T-shirt',
imageUrl: 'https://i.ibb.co/qMQ75QZ/floral-shirt.png',
price: 20
},
{
id: 32,
name: 'Black & White Longsleeve',
imageUrl: 'https://i.ibb.co/55z32tw/long-sleeve.png',
price: 25
},
{
id: 33,
name: 'Pink T-shirt',
imageUrl: 'https://i.ibb.co/RvwnBL8/pink-shirt.png',
price: 25
},
{
id: 34,
name: 'Jean Long Sleeve',
imageUrl: 'https://i.ibb.co/VpW4x5t/roll-up-jean-shirt.png',
price: 40
},
{
id: 35,
name: 'Burgundy T-shirt',
imageUrl: 'https://i.ibb.co/mh3VM1f/polka-dot-shirt.png',
price: 25
}
]
}
]
)
solution4
0 2020-11-22 19:59:11
const SHOP_DATA = [ { 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 } ] }, { id: 2, title: 'Sneakers', routeName: 'sneakers', items: [ { id: 10, name: 'Adidas NMD', imageUrl: 'https://i.ibb.co/0s3pdnc/adidas-nmd.png', price: 220 }, { id: 11, name: 'Adidas Yeezy', imageUrl: 'https://i.ibb.co/dJbG1cT/yeezy.png', price: 280 }, { id: 12, name: 'Black Converse', imageUrl: 'https://i.ibb.co/bPmVXyP/black-converse.png', price: 110 }, { id: 13, name: 'Nike White AirForce', imageUrl: 'https://i.ibb.co/1RcFPk0/white-nike-high-tops.png', price: 160 }, { id: 14, name: 'Nike Red High Tops', imageUrl: 'https://i.ibb.co/QcvzydB/nikes-red.png', price: 160 }, { id: 15, name: 'Nike Brown High Tops', imageUrl: 'https://i.ibb.co/fMTV342/nike-brown.png', price: 160 }, { id: 16, name: 'Air Jordan Limited', imageUrl: 'https://i.ibb.co/w4k6Ws9/nike-funky.png', price: 190 }, { id: 17, name: 'Timberlands', imageUrl: 'https://i.ibb.co/Mhh6wBg/timberlands.png', price: 200 } ] }, { id: 3, title: 'Jackets', routeName: 'jackets', items: [ { id: 18, name: 'Black Jean Shearling', imageUrl: 'https://i.ibb.co/XzcwL5s/black-shearling.png', price: 125 }, { id: 19, name: 'Blue Jean Jacket', imageUrl: 'https://i.ibb.co/mJS6vz0/blue-jean-jacket.png', price: 90 }, { id: 20, name: 'Grey Jean Jacket', imageUrl: 'https://i.ibb.co/N71k1ML/grey-jean-jacket.png', price: 90 }, { id: 21, name: 'Brown Shearling', imageUrl: 'https://i.ibb.co/s96FpdP/brown-shearling.png', price: 165 }, { id: 22, name: 'Tan Trench', imageUrl: 'https://i.ibb.co/M6hHc3F/brown-trench.png', price: 185 } ] }, { id: 4, title: 'Womens', routeName: 'womens', items: [ { id: 23, name: 'Blue Tanktop', imageUrl: 'https://i.ibb.co/7CQVJNm/blue-tank.png', price: 25 }, { id: 24, name: 'Floral Blouse', imageUrl: 'https://i.ibb.co/4W2DGKm/floral-blouse.png', price: 20 }, { id: 25, name: 'Floral Dress', imageUrl: 'https://i.ibb.co/KV18Ysr/floral-skirt.png', price: 80 }, { id: 26, name: 'Red Dots Dress', imageUrl: 'https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png', price: 80 }, { id: 27, name: 'Striped Sweater', imageUrl: 'https://i.ibb.co/KmSkMbH/striped-sweater.png', price: 45 }, { id: 28, name: 'Yellow Track Suit', imageUrl: 'https://i.ibb.co/v1cvwNf/yellow-track-suit.png', price: 135 }, { id: 29, name: 'White Blouse', imageUrl: 'https://i.ibb.co/qBcrsJg/white-vest.png', price: 20 } ] }, { id: 5, title: 'Mens', routeName: 'mens', items: [ { id: 30, name: 'Camo Down Vest', imageUrl: 'https://i.ibb.co/xJS0T3Y/camo-vest.png', price: 325 }, { id: 31, name: 'Floral T-shirt', imageUrl: 'https://i.ibb.co/qMQ75QZ/floral-shirt.png', price: 20 }, { id: 32, name: 'Black & White Longsleeve', imageUrl: 'https://i.ibb.co/55z32tw/long-sleeve.png', price: 25 }, { id: 33, name: 'Pink T-shirt', imageUrl: 'https://i.ibb.co/RvwnBL8/pink-shirt.png', price: 25 }, { id: 34, name: 'Jean Long Sleeve', imageUrl: 'https://i.ibb.co/VpW4x5t/roll-up-jean-shirt.png', price: 40 }, { id: 35, name: 'Burgundy T-shirt', imageUrl: 'https://i.ibb.co/mh3VM1f/polka-dot-shirt.png', price: 25 } ] } ]; const CollectionExtract = ({ item }) => { return ( <li> <p>{item.name} - ${item.price}</p> <img src={item.imageUrl} /> </li> ); }; const Collection = ({ collection }) => { return ( <div> <h3>{collection.title}</h3> <ul> { collection .items .slice(0, 4) .map((item) => { return ( <CollectionExtract item={item} /> ); }) } </ul> </div> ); }; const Collections = ({ collections }) => { return collections.map(collection => { return ( <Collection collection={collection} /> ); }); }; const App = () => { return ( <div> <h1>My Store</h1> <Collections collections={SHOP_DATA} /> </div> ); }; ReactDOM.render( <App />, document.querySelector('#root') );
<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
solution5
0 2020-11-22 21:33:50
For your question, you almost do it right. if every route sends to the products type component the items will look like:
import React from "react";
import Item from "./Item";
const Products = ({ title, items }) => {
return (
<div className="products-container">
<h1>{title}</h1>
{items.map((item) => (
<Item key={item.id} item={item} />
))}
</div>
);
};
export default Products;
You can see the collection Extract Component, I called it Item get the item as a prop.
import React from "react";
const Item = ({ item: { imageUrl, name, price } }) => {
return (
<div>
<h4>{name}</h4>
<img src={imageUrl} />
<div>${price}</div>
</div>
);
};
export default Item;
the answer in codesandbox website also can open and see
a little bit, I took it far with the react-router-dom library.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to extract data from JS array in an html file to VBA
How to extract data from nested objects array in React?
How to extract some data from json in react JS (axios)?
How do we read one level nested deep array data from firebase in react js?
React.js how to get array from js file
How to get values from nested array of objects - React JS
How to map data from two nested arrays in react js?
How to map a nested array in React.js?
How to extract data from a .list file with node.js
How to extract data from nested json in react
Related Tags