0

I am trying to create a side navigation menu that's divided into sections, each with a title and an array of links. When I loop through Object.entries, the section title is showing, but the array of links is not showing.

export default function AdminSideNav() {
  return (
    <div className={`${styles.admin_sidenav}`}>
      {Object.entries(sidenav).map(([sectionTitle, linkList]) => (
        <div>
          <h4 key={sectionTitle} className={`${styles.section_title}`}>
            {sectionTitle}
          </h4>
          {linkList.map((section, idx) => {
            <p key={idx} className={`${styles.section_name}`}>
              {section.name}
            </p>;
          })}
        </div>
      ))}
    </div>
  );
}

screenshot

Phil
  • 157,677
  • 23
  • 242
  • 245
mcneelyad
  • 17
  • 1
  • 6
  • 1
    Your `linkList.map()` function has no return value. You should also not ignore warnings about missing `key` properties... `
    `
     – Phil Aug 11 '23 at 02:24
  • Why are you using template literals for the class names? Why not simply `className={styles.admin_sidenav}`? – Phil Aug 11 '23 at 02:26
  • Is there a reason why the first `.map(...)` doesn't need a return, but the second one does? – mcneelyad Aug 11 '23 at 02:33
  • 1
    It has an implicit return. See the duplicate – Phil Aug 11 '23 at 02:35

0 Answers0