I have a ChipField in my Datagrid in my React Admin App which shows a text property. Now, I'd like to add an icon to that ChipField by using the icon prop. Since the ChipField can have one of five static values, the icon should change according to the text.
My approach is:
export const IOList = props => {
function getTypeImage(id) {
console.log(id);
switch(id) {
case "image": return <ImageIcon />;
case "document": return <FormatColorTextIcon />;
case "audio": return <AudiotrackIcon />;
case "video": return <VideocamIcon />;
case "location": return <LocationOnIcon />;
}
}
return(<List filters={IOFilters} {...props}> {
<Datagrid>
<TextField source="id" />
<TextField source="name" />
<ChipField source="type" choices={choices} icon={getTypeImage(record.type)}/>
</Datagrid>
</List>);
};
But I wouldn't be here if that worked.
In fact, record is unknown. If I remove the function parameter entirely and return e.g. return <AudiotrackIcon /> the icon is displayed.
My question is how to access the record displayed in each column.
I guess the problem is that you are trying to pass a JSX component as a prop of ChipField
You should pass JSX as a children
<ChipField source="type" ...> {getTypeImage(record.type)} </ChipField>
I dont know where you're picking record datas, but this is not a "wonderful" solution, A better option is to deprecate ChipField component, because at the moment is just a wrapper used like a high order component
Map record in IOList and save the right Icon component in a const, and then print it
const icon = getTypeImage(record.data)
<Datagrid>
<TextField source="id" />
<TextField source="name" />
{icon}
</Datagrid>