Tengo un ChipField en mi Datagrid en mi aplicación React Admin que muestra una propiedad de text . Ahora, me gustaría agregar un ícono a ese ChipField usando el accesorio de ícono. Dado que ChipField puede tener uno de los cinco valores estáticos, el ícono debe cambiar de acuerdo con el texto.
Mi enfoque es:
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>); };Pero no estaría aquí si eso funcionara.
De hecho, se desconoce el registro . Si elimino el parámetro de función por completo y devuelvo, por ejemplo return <AudiotrackIcon /> , se muestra el icono. Mi pregunta es cómo acceder al registro que se muestra en cada columna.
Supongo que el problema es que está intentando pasar un componente JSX como accesorio de ChipField. Debería pasar JSX como <ChipField source="type" ...> {getTypeImage(record.type)} </ChipField>
No sé dónde está eligiendo datos de registro, pero esta no es una solución "maravillosa". Una mejor opción es desaprobar el componente ChipField, porque en este momento es solo un contenedor que se usa como un componente de orden alto
Asigne record en IOList y guarde el componente Icon correcto en una const, y luego imprímalo
const icon = getTypeImage(record.data)
<Datagrid> <TextField source="id" /> <TextField source="name" /> {icon} </Datagrid>