TypeError: Cannot read properties of undefined (reading '0') whilte trying to accessing an-CodePudding

I am getting TypeError: Cannot read properties of undefined (reading '0') when I'm trying to access the data that I've pulled from my database (receivedData which is an object). I've tried console.log my receivedData and it does have data in it. Here's how my social structure looks like where it is one of the keys of my receivedData object.

const logoObj = {
    "telegram": telegramWIcon,
    "twitter": twitterWIcon,
    "website": linkWIcon,
    "whitepaper": fileWIcon
  }

{receivedData.social[0] !== null &&
   <div>
       { Object.entries(receivedData.social[0]).forEach((item) =>
           item[1] !== null ? <SocialMedia url={logoObj.item[0]} link={item[1]} /> : ""
       )}
   </div>
}

CodePudding user response：

There is no item field in logoObj. You need to access the key dynamically with logoObj[item].

const logoObj = {
    "telegram": telegramWIcon,
    "twitter": twitterWIcon,
    "website": linkWIcon,
    "whitepaper": fileWIcon
  }

{receivedData.social[0] !== null &&
   <div>
       { Object.entries(receivedData.social[0]).forEach((item) =>
           item[1] !== null ? <SocialMedia url={logoObj[item][0]} link={item[1]} /> : ""
       )}
   </div>
}

CodePudding user response：

const logoObj = {
  telegram: telegramWIcon,
  twitter: twitterWIcon,
  website: linkWIcon,
  whitepaper: fileWIcon,
};

{receivedData.social[0] !== null && (
  <div>
    {Object.entries(receivedData.social[0]).map(([type, link]) => {
      if (!link || !logoObj[type]) {
        returt null;
      }

      return <SocialMedia key={link} link={link} url={type} />;
    })}
  </div>
)}