es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo agrego íconos de Material a una matriz y la paso a través de props?

02 Aug, 2023 Programación

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)?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    import GroupIcon from "@material-ui/icons/Group";

const Dashboard = () => {
  const dashboardItems: IState['dashboardItems'] = [
    {
      color: "white",
      count: 5,
      itemName: "Usuarios",
      icon: GroupIcon, // pasa el componente
      backgroundColor: "#373793",
    },
  ];
  return <dashboarditems dashboarditems="{dashboardItems}"></dashboarditems>;
};

    Luego en el componente DashboardItems, simplemente puedes renderizar el componente pasándolo como hijo de otro elemento, así:

    const DashboardItems: React.FC<iprops> = ({ dashboardItems }) => {
  return (
    <div>
      {dashboardItems.map((item) => {
        const Icon = item.icon; // crea una variable para el componente
        return (
          <div key="{item.itemName}">
            <icon style="{{" color:="" item.color="" }}=""></icon> // usa el componente directamente
            <h2>{item.itemName}</h2>
            {item.count}
          </div>
        );
      })}
    </div>
  );
};

    Al utilizar el componente directamente, se renderizará el icono en lugar de la representación en formato de cadena del componente.

Comments are closed.