El problema no está definido de currentPackage. render() { const { hasAccounts, apartClassesFromConfig, disabledScroll, htmlClassService, currentPackage, usuario, } = this.props; const isActive = checkStatus(¿usuario?.status);
const packageLogo = currentPackage.name && currentPackage.logo && ( <div className="vk-inductee-button-wrapper"> <div className="vk-inductee-button-image-wrapper"> <img src={currentPackage.logo} className="vk-inductee-button-image" alt="inductee-img" /> </div> <div className="vk-inductee-button-label"> <span>{currentPackage.name}</span> </div> </div> ); return ( <> <button className="kt-aside-close" id="kt_aside_close_btn"> <i className="la la-close" /> </button> <div id="kt_aside" ref={this.asideOffCanvasRef} className={`kt-aside ${asideClassesFromConfig} kt-grid__item kt-grid kt-grid--desktop kt-grid--hor-desktop`}> <Brand /> <div id="kt_aside_menu_wrapper" className="kt-aside-menu-wrapper kt-grid__item kt-grid__item--fluid"> <AsideDropdown /> {isActive ? ( <Link to="/shop/my-packages">{packageLogo}</Link> ) : ( packageLogo )} {disableScroll && <Menu htmlClassService={htmlClassService} />} {!disableScroll && ( <PerfectScrollbar options={{ wheelSpeed: 2, wheelPropagation: false }}> <Menu htmlClassService={htmlClassService} /> </PerfectScrollbar> )} {hasAccounts && <AsideFooter />} </div> </div> </> );} }
podrías hacer algo como
const packageLogo = currentPackage && currentPackage.name && currentPackage.logo && ( <> //your code </> ) el problema es que currentPackage no está definido, pero está comprobando si currentPackage.name es verdadero. Dado que el name de la propiedad no existe en undefined , obtiene ese error. Solo debe verificar que currentPackage sea veraz antes de verificar propiedades específicas en él.