React router v6 issue: how can I use match.params in element={ } as it replaced component={} How to pass match.params in the element

<Route path='/menu/starters/:id' element={<DetailedCard item={this.state.starters.filter((dish,{match}) => dish.id === parseInt(match.params.id))[0]} /> } />

Solution 1:

Since you are "injecting" an item prop based on a route match param then I suggest creating a wrapper component to read from the current route and inject the prop.

const DetailedCardWrapper = () => {
  const { id } = useParams();
  const item = this.state.starters.find((dish) => dish.id === Number(id));

  return <DetailedCard item={item} />;
};

<Route path='/menu/starters/:id' element={<DetailedCardWrapper />} />