I am trying to implement filter buttons for low to high rates and high to low rates, but I am having trouble figuring it out. How can I apply the filter to display the data accordingly?
The data that needs to be filtered is stored in rate.retail_rate.
type Props = {
shipmentOptions: ShipmentRate[];
isSelected?: boolean;
setIsSelected?: Dispatch<SetStateAction<boolean>>;
};
const USPSItems = ({ shipmentOptions, setIsSelected }: Props) => {
const setSelectedRate = useShipmentRateStore(
(state) => state.setSelectedRate
);
const [selectedItem, setSelectedItem] = useState<number | null>(null);
const handlePress = (rate: ShipmentRate, index: number) => {
setSelectedItem(index);
setSelectedRate(rate);
setIsSelected(true);
};
return (
<>
<ShipmentRatesContainer>
{shipmentOptions &&
shipmentOptions.map((rate: ShipmentRate, index) => (
<ClickableItem key={index} onClick={() => handlePress(rate, index)}>
<PackagesActiveItem
key={index}
index={index}
isSelected={index === selectedItem}
>
<PackagesItemIcon>
<SVGCustomIcon name="USPSLogo" />
</PackagesItemIcon>
<div style={{ display: "flex", flexDirection: "column" }}>
<PackagesItemLocation>{rate.carrier}</PackagesItemLocation>
<PackagesItemService>{rate.service}</PackagesItemService>
</div>
<PackagesItemRight>
<PackagesItemRightText>
${rate.retail_rate}
</PackagesItemRightText>
</PackagesItemRight>
<USPSItemBottomText>
Estimated to arrive{" "}
{rate.est_delivery_days
? "in " + rate.est_delivery_days + " business days"
: "within the next day"}
</USPSItemBottomText>
</PackagesActiveItem>
</ClickableItem>
))}
</ShipmentRatesContainer>
</>
);
};