Any
Any is the component that renders component only if any of the items in the array satisfies the condition.
import React from "react";
interface IAnyProps<T> {
items: T[];
condition: (item: T) => boolean;
children: (item: T, index: number) => React.ReactNode;
}
export default function Any<T>({ items, condition, children }: IAnyProps<T>) {
return <>{items.filter(condition).map(children)}</>;
}
Usage:
<Any items={[1, 2, 3, 4, 5]} condition={(item) => item % 2 === 0}>
{(item, index) => <span key={index}>{item}</span>}
</Any>