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

Your question is unclear. Do you want to remove all elements after 4 from each type or want to remove the name and imageUrl props after 4 items? — Maheer Ali
– Maheer Ali, Commented Nov 22, 2020 at 19:12

Matthew Moran · Accepted Answer · 2020-11-22 19:24:42Z

3

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>
  )
}

edited Nov 22, 2020 at 19:24

answered Nov 22, 2020 at 19:14

Matthew Moran

1,49712 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

theJuls · Accepted Answer · 2020-11-22 19:29:40Z

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>

Sersif Samir · Accepted Answer · 2020-11-22 19:39:21Z

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
            }
          ]
        }
      ]
      
)

JBallin · Accepted Answer · 2020-11-22 19:59:11Z

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>

Omer Cohen · Accepted Answer · 2020-11-22 21:33:50Z

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

React Example

a little bit, I took it far with the react-router-dom library.

Collectives™ on Stack Overflow

how to extract data from react js nested array js file?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related