× TypeError: Cannot read properties of undefined (reading 'name')

Question

The problem is undefined of currentPackage. render() { const { hasAccounts, asideClassesFromConfig, disableScroll, htmlClassService, currentPackage, user, } = this.props; const isActive = checkStatus(user?.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>
  </>
);

} }

Answer 1

you might do something like

const packageLogo = currentPackage && currentPackage.name && currentPackage.logo && (
  <>
   //your code
  </>
)

the problem is that currentPackage is undefined, but you're checking if currentPackage.name is truthy. Since the property name doesn't exist on undefined , you get that error. You should just need to check that currentPackage itself is truthy before checking specific properties on it.