¿Cómo agrego íconos de Material a una matriz y la paso a través de props?
Estoy trabajando en un proyecto con react, typescript y material icons.
Quiero agregar mis material icons a un array y pasarlo a través de props.
Pero me muestra las letras (string) del ícono.
Un ejemplo de esto en el código, que se muestra en el navegador como
export interface IDashboard {
dashboardItems: {
color: string;
count: number;
itemName: string;
icon?: any;
backgroundColor: string;
}[];
}
Dashboard
import { IDashboard as IState } from "../utils/Types";
const Dashboard = () => {
const dashboardItems: IState['dashboardItems'] = [
{
color: "white",
count: 5,
itemName: "Users",
icon: "<groupicon></groupicon>",
backgroundColor: "#373793",
},
];
return (
<dashboarditems dashboarditems="{" dashboarditems="" }=""></dashboarditems>
)
}
DashboardItems
import { IDashboard as IProps } from "../utils/Types";
import GroupIcon from "@material-ui/icons/Group";
const DashboardItems: React.FC<iprops> = ({ dashboardItems }) => {
return (
<div>{dashboardItem.icon}</div>
)}
¿Cómo hago para que se muestre el ícono en lugar de las letras (string)?
davy.ai
Para mostrar el icono en lugar de las letras (cadena de texto), debes renderizar el componente en sí mismo y no una representación en formato de cadena del componente. En el componente Dashboard, asegúrate de pasar el componente real como valor de la propiedad icon, de esta manera:
Luego en el componente DashboardItems, simplemente puedes renderizar el componente pasándolo como hijo de otro elemento, así:
Al utilizar el componente directamente, se renderizará el icono en lugar de la representación en formato de cadena del componente.