Issue
i want to make a chip list, which will basicaly take an array of elements, and a predicate by which it will evaluate each element of the array. something like array.filter in vanilla js or lodash.find.
maybe something like <ChipComponent data={nameAgeArray} predicate={{age == something}}/>
only the chip that finds that predicate truthy will be selected for example.
update 1
thanks guys! so i managed that, now i want to be able to pass it a generic key that will be used as a label. i read something about mapped types but im not sure what im doing wrong.
heres what is tried.
interface IChipListManagerProps<T> {
data: T[];
predicate: (t: T) => boolean;
label: {
[Property in keyof T]: Object;
};
}
function ChipListManager<T>({ data, predicate }: IChipListManagerProps<T>) {
const Chips = buildChips<T>(data.filter(predicate));
return (
<Grid container direction="row" spacing={2}>
<Grid item></Grid>
{Chips}
</Grid>
);
}
export default ChipListManager;
function buildChips<T>(data: T[]):JSX.Element[]{
return data.map((item, index) => {
return (
<Grid item key={index}>
<Chip label={"generic label here"} onClick={() => {}} />
</Grid>
);
});
};
Solution
Try something like below:
type ChipComponentProps<T> = {
data: T[],
predicate: (t: T) => boolean
}
const ChipComponent = <T>(props: ChipComponentProps<T>) => {
const {data, predicate} = props;
const filteredData = useMemo(() => {
return data.filter(predicate)
}, [data, predicate])
return (<>
{filteredData.map(a => {
...
})}
</>)
}
and else where
<ChipComponent data={nameAgeArray} predicate={(entry) => entry > 10}/>
Answered By - Chandu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.