Tengo una matriz de datos, así:
export const links = [ { name: 'Facebook', url: 'https://facebook.com', icon: 'SiFacebook', }, /* ... rest of it */ ] Luego, para cada uno de estos nombres de icon , tengo un componente (que en realidad es un ícono que usa React Icons , por ejemplo, representaría:
<SiFacebook />
Entonces, después de mapearlo en mi página, necesito hacer algo como esto:
{links.map((link: any, index: any) => ( <li key={index} className="w-60 rounded-md bg-neutral-focus grid grid-cols-1 p-3 mx-2" > {React.createElement(`${link.icon}` ,{})} <a href={link.url} target="_blank" rel="_noreferrer" className="text-sm font-bold" > {link.name} </a> </li> ))} Entonces necesito representar cada link.icon como un componente. Intenté usar React.createElement pero no funcionó. Otras formas tampoco funcionaron. ¿Qué estoy haciendo mal?
eso no es posible porque también necesita importar el ícono de acuerdo con los documentos de íconos de reacción --> https://react-icons.github.io/react-icons/ donde está tratando de renderizar, la otra y mejor manera es para enviar el icono como un componente de la matriz como esta
import { FaBeer } from 'react-icons/fa'; export const links = [ { name: 'Facebook', url: 'https://facebook.com', icon: <FaBeer />, }, /* ... rest of it */ ]