Estoy tratando de usar la función de mapa pero no puedo hacerlo bien. Tengo una barra lateral en la que quiero mostrar algunos iconos. Aquí hay un ejemplo sin el mapa.
const SideBar = () => { return ( <div className="fixed top-0 left-0 h-screen w-20 m-0 flex flex-col bg-gray-100 text-white shadow-lg"> <SideBarIcon icon={<FaFire size="30" />} /> <SideBarIcon icon={<FaPoo size="30" />} /> </div> ); }; const SideBarIcon = ({ icon, text = "tooltip 💡"}) => ( <div className="sidebar-icon group"> {icon} <span class="sidebar-tooltip group-hover:scale-100">{text}</span> </div> );Aquí hay un ejemplo con la función de mapa
const SideBar = () => { const icons = [FaFire, FaPoo]; return ( <div className="fixed top-0 left-0 h-screen w-20 m-0 flex flex-col bg-gray-100 text-white shadow-lg"> {icons.map(function(icon) { return <SideBarIcon icon={<icon size="30"/>}/> })} </div> ); }; const SideBarIcon = ({ icon, text = "tooltip 💡"}) => ( <div className="sidebar-icon group"> {icon} <span class="sidebar-tooltip group-hover:scale-100">{text}</span> </div> );¿Puedes decirme qué estoy haciendo mal? ¡Gracias por tu tiempo!
{icons.map(function (Icon) { return <SideBarIcon icon={<Icon size="30"/>}/> })} Los componentes comienzan con letras mayúsculas, simplemente cambie el icon a Icon . Por favor, no olvides usar accesorios clave para tus elementos mapeados.
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
Simplemente colocando el icon dentro de las etiquetas, cree que está representando un elemento HTML llamado ícono, por lo tanto, no está representando el elemento asignado. Tampoco funcionaría si lo configura como <{icon}/> , porque estaría intentando representar un elemento vacío.
Afortunadamente, hay una solución fácil: simplemente escriba Icon en mayúsculas y React lo representará como un componente JSX.
{icons.map(function(Icon) { return <SideBarIcon icon={<Icon size="30"/>}/> })}const SideBar = () => { const icons = [<FaFire size="30" />, <FaPoo size="30" />]; return ( <div className="fixed top-0 left-0 h-screen w-20 m-0 flex flex-col bg-gray-100 text-white shadow-lg"> {icons.map(function(icon) { return <SideBarIcon icon={icon}/> })} </div> );};