1

Estoy aprendiendo React, y me encontré con un problema que no pude solucionar (de la forma que explico a continuación), resulta que al importar un icono de React Icons la forma es

import {FaIconName} from 'X';

Pero quise hacerlo de forma dinámica, y creé un componente que me retorna lo que estoy buscando: un <div> con un título y un icono.


export function SidebarItem({ item }) {
 
 return (

   <div className='sidebar_item' key={item.title}>
     <Link to={item.path}>
       <div className='flex'>
         {item.title}
       </div>
     </Link>
   </div>
 );

Cuando quiero anexar el icono, lo quise hacer de la forma

<{item.icon}/> ----> con la sorpresa que no funciona...

Al darme cuenta del error intenté hacer otras formas como las siguientes

<{...item.icon}/>
{<{...item.icon}/>}
<`${item.icon}`/>

Aún todas sin funcionar.

Y aunque buscando aquí mismo encontré soluciones, como crear una función externa que evalúe el nombre del icono y retorne un componte de adecuado a la validación, lo que realmente quiero es salir de dudas si lo que estoy haciendo no se puede hacer, o simplemente no lo estoy aplicando de forma correcta, y con esto me refiero a hacer cosas justamente como estas:

<{...item.icon}/>
{<{...item.icon}/>}
<`${item.icon}`/>

Porque pensé que los literal strings me permitirían incluir los angle brackets </> pero al parecer no.

Gracias.

1
  • De qué forma estas enviando el componente del icono hacia tu componente Sidebar? Commented el 11 feb. 2021 a las 17:49

1 respuesta 1

1

Siguiendo tu ejemplo si el icono lo importas así:

import {FaIconName} from 'X';

Y lo puedes renderizar como un componente:

<div><FaIconName /></div>

Puedes guardarlo en item así:

item:{
  path:"path",
  title:"title",
  icon: <FaIconName />
}

Y renderizarlo como si fuera una prop mas:

export function SidebarItem({ item }) {
     return (
       <div className='sidebar_item' key={item.title}>
         <Link to={item.path}>
           <div className='flex'>
             {item.icon} {item.title}
           </div>
         </Link>
       </div>
     );
2
  • Tasio, que te parece mejorar la respuesta con un ejemplo práctico de tu solución... suena bien no? ;) Commented el 11 feb. 2021 a las 18:07
  • 1
    Exactamente lo que buscaba muchas gracias por tu colaboración. Commented el 11 feb. 2021 a las 18:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.