https://codesandbox.io/s/brave-surf-t3todt?file=/src/components/SidebarOption.js:187-194
La aplicación funciona perfectamente hasta que no uso el componente Icon en SidebarOption.js. Tan pronto como lo puse allí, se muestra una página en blanco con la consola arrojando el siguiente error
expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
SidebarOption.js
import React from "react"; import "../style/sidebarOption.css"; function SidebarOption({ text, Icon }) { return ( <div className="sidebarOption"> <h2> {text} </h2> {/* <Icon/> */} </div> ); } export default SidebarOption;Barra lateral.js
import React from 'react' import '../style/sidebar.css' import { SidebarOption } from './' import TwitterIcon from '@mui/icons-material/Twitter'; import HomeIcon from '@mui/icons-material/Home'; import SearchIcon from '@mui/icons-material/Search'; import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone'; function Sidebar() { return ( <div className="sidebar"> <TwitterIcon /> <SidebarOption Icon={HomeIcon} text='Home'/> <SidebarOption Icon={SearchIcon} text='Explore'/> <SidebarOption Icon={NotificationsNoneIcon} text='Notifications'/> </div> ) } export default Sidebar;No sé por qué recibe ese error según el código que mostró aquí, pero en los códigos y el cuadro que mencionó, el error se debe a que llamó al componente de la barra lateral dos veces sin accesorios.
Puede corregir ese error como este mediante el ícono de procesamiento condicional solo si se pasa
function SidebarOption({ text, Icon }) { return ( <div className="sidebarOption"> <h2> {text} </h2> { Icon && <Icon/> } </div> ); } export default SidebarOption;Lo que estás haciendo es intentar representar algo que potencialmente no está definido aquí: {/* <Icon/> */} . Reemplace esto con {Icon && <Icon />} para comprobar si se puede renderizar el accesorio.