How would I place each bike in its assigned category? ReactJS

Question

Here's my codesandbox of my app

https://codesandbox.io/s/wizardly-dan-vh27oj?file=/src/BikeView.jsx

I want to have a container for each type of category. In each container will be the bikes that fall into that category. I have my App.js that has my array of objects which holds each bike and its information. There is category key that indicates which gives a brief summary of what the bike is. I am looking to just wrap all the bikes into its desired category.

Thanks in advance!

App.js

import BikeView from "./bikes/BikeView"

export default function App() {

const BIKEDATA = [
  {
    category: "Cargo",
    bikeModel: "runner 2",
    motor: "750w motor",
    price: "$1,499",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/US-RadRunner2-Black-Right-View_3919856d-cdf6-4cfe-af7c-54877005d5da_900x.jpg?v=1643842909",
    imageAlt: "runner 2 image",
    weight: "65 lb",
    payload: "300 lb"
  },

  {
    category: "Cargo",
    bikeModel: "runner plus",
    motor: "750w motor",
    price: "$1,899",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/RadRunner_Plus_Right_View_3000_1_800x.jpg?v=1613000410",
    imageAlt: "runner plus image",
    weight: "74.3 lb",
    payload: "300 lb"
  },

  {
    category: "Cargo",
    bikeModel: "wagon",
    motor: "750w motor",
    price: "$1,999",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/RadWagon4_Orange_Right_View_2400px_1200x_0769e6af-c59f-4f14-9fcc-40f1c607654a_900x.jpg?v=1643843074",
    imageAlt: "wagon image",
    weight: "77 lb",
    payload: "300 lb"
  },
  {
    category: "Budget",
    bikeModel: "mission",
    motor: "500w motor",
    price: "$1,199",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/RadMission_Grey_Right_View_2400_1200x_b1a46d13-f8fd-49e7-8f03-7373c006cace_900x.jpg?v=1644252641",
    imageAlt: "mission image",
    weight: "48 lb",
    payload: "275 lb"
  },
  {
    category: "Budget",
    bikeModel: "expand 5",
    motor: "750w motor",
    price: "$1,299",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/ExpandWhite_1_700x.jpg?v=1646335557",
    imageAlt: "runner1 image",
    weight: "62.5 lb",
    payload: "275 lb"
  },
  {
    category: "Budget",
    bikeModel: "mini step-thru",
    motor: "750w motor",
    price: "$1,499",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/RadMini_ST2_Right_View_2400_900x.jpg?v=1612312638",
    imageAlt: "minist image",
    weight: "71 lb",
    payload: "275 lb"
  },
  {
    category: "Commuter",
    bikeModel: "city 5 Plus",
    motor: "750w motor",
    price: "$1,999",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/City5HS_1_900x.jpg?v=1643843642",
    imageAlt: "city5 image",
    weight: "65 lb",
    payload: "300 lb"
  },
  {
    category: "Commuter",
    bikeModel: "mini step-thru",
    motor: "750w motor",
    price: "$1,499",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/RadMini_ST2_Right_View_2400_900x.jpg?v=1612312638",
    imageAlt: "minist image",
    weight: "71 lb",
    payload: "275 lb"
  },
  {
    category: "Commuter",
    bikeModel: "runner 2",
    motor: "750w motor",
    price: "$1,499",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/US-RadRunner2-Green-Right-View_218bde8e-1179-442d-972d-933283821cf7_900x.jpg?v=1643845203",
    imageAlt: "runner2 image",
    weight: "65 lb",
    payload: "300 lb"
  },
  {
    category: "all-terrain",
    bikeModel: "rover 6 plus",
    motor: "750w motor",
    price: "$1,999",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/R6HS_1_900x.jpg?v=1643843233",
    imageAlt: "rover6 image",
    weight: "75 lb",
    payload: "275 lb"
  },
  {
    category: "all-terrain",
    bikeModel: "runner 2",
    motor: "750w motor",
    price: "$1,499",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/US-RadRunner2-Green-Right-View_218bde8e-1179-442d-972d-933283821cf7_900x.jpg?v=1643845203",
    imageAlt: "runner2 image",
    weight: "65 lb",
    payload: "300 lb"
  },
  {
    category: "all-terrain",
    bikeModel: "runner plus",
    motor: "750w motor",
    price: "$1,899",
    image:
      "https://cdn.shopify.com/s/files/1/0799/9645/products/RadRunner_Plus_Right_View_3000_1_800x.jpg?v=1613000410",
    imageAlt: "runnerplus image",
    weight: "75 lb",
    payload: "300 lb"
  },
  
];


  return (
    <div className="App">

      <BikeView data={BIKEDATA} />
      
    </div>
  );
}


**BikeView.jsx**

export const BikeView = (props) => {
  const { data } = props;

  return (
    <div className="bikelist">
      <ul>
        <>
        {data.map((bike) => (
          <>
           <img src={bike.image} alt={bike.imageAlt} />
           <li>{bike.bikeModel}</li>
           <li>{bike.price}</li>
           <li>{bike.weight}</li>
           <li>{bike.payload}</li>
           <li><b>motor:</b>{bike.motor}</li>
          </>

        
        
        ))}
        </>
      </ul>
    </div>
  );
};

export default BikeView;

score 0 · Answer 1 · answered Mar 19 '22 at 01:01

You can use reduce function to group your data by category property.
I am using the answer from this discussion.
Code snippet below and Sandbox demo

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

How would I place each bike in its assigned category? ReactJS

1 Answers1