Kevin Powell - Community•7mo ago

Invoking a route in Link but as a component & with an argument obj to pass to the component

The Github:https://github.com/nnall/hm-frontend-Nick.git I have a component, <VehicleDetails/> which is meant to take in a 'vehicle' object argument, in order to render details on a car details page. <VehicleDetails/> is listed as a Route in App.js, with path "/vehicle-details" Another Route - my <Store/> component - has, in its return, a Carousel component which maps some <Store/>-fetched inventory, vehicle objects, into carousel 'cells'. This Carousel is supposed to be in the return of <Store/> like this:

const Store = () =>{
useEffect(() => {
  const fetchData = async () => {
   
  fetch code resulting in --> setStoreInventory(data);
  
}, [storeInv]);
return{
<InventoryCarousel storeInventory={storeInventory} /> <-----
}
}

const Store = () =>{
useEffect(() => {
  const fetchData = async () => {
   
  fetch code resulting in --> setStoreInventory(data);
  
}, [storeInv]);
return{
<InventoryCarousel storeInventory={storeInventory} /> <-----
}
}

And this is how the Carousel uses the storeInventory for that location to render html:

<div className="carousel">
  {storeInventory.map((vehicle) => (
    <div key={vehicle.id} className="carousel_item">
      <img src={vehicle.img} alt={`${vehicle.make} ${vehicle.model}`} />
      <h3>
        {vehicle.make} {vehicle.model}
      </h3>
      <p>Stock Number: {vehicle.stockNumber}</p>
      <Link to={`/vehicle-details/${vehicle.stockNumber}`}>.   <--- this is the problem
        See This Car
      </Link>
      ;
    </div>
  ))}
</div>

<div className="carousel">
  {storeInventory.map((vehicle) => (
    <div key={vehicle.id} className="carousel_item">
      <img src={vehicle.img} alt={`${vehicle.make} ${vehicle.model}`} />
      <h3>
        {vehicle.make} {vehicle.model}
      </h3>
      <p>Stock Number: {vehicle.stockNumber}</p>
      <Link to={`/vehicle-details/${vehicle.stockNumber}`}>.   <--- this is the problem
        See This Car
      </Link>
      ;
    </div>
  ))}
</div>

In each cell/vehicle that the Carousel returns, I want to include a <Link/> for that vehicle, which will both take the user to the <VehicleDetails/> component, but I also want to invoke iVehicleDetails by also pass that current 'vehicle' object being mapping over into <VehicleDetails/> as the user is taken to that component, so that another api call doesn't have to be made for that same 'vehicle' object again once the user gets to VehicleDetails. I am working on getting my example repo caught up to post here too, but in the meantime the picture attached shows everything I'm talking about and how the components are relating. Any input it greatly appreciated as always.

GitHub

GitHub - nnall/hm-frontend-Nick

Contribute to nnall/hm-frontend-Nick development by creating an account on GitHub.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Invoking a route in Link but as a component & with an argument obj to pass to the component