Сопоставление массива объектов с одним вложенным массивом объектов

Question

У меня есть массив объектов, каждый объект содержит два элемента и массив ссылок, которые должны появляться в элементе.

const array = [
    {
      text: "x",
      icon: "x",
      links: [
        { link: "www.google.com", title: "ABC" },
        { link: "www.linkedin.com", title: "CDE" },
      ],
    },
    {
      text: "y",
      icon: "y",
      links: [
        { link: "www.twitter.com", title: "Google" },
        { link: "www.facebook.com", title: "Linkedin" },
      ],
    },
  ];

Это мой возврат

{array.map((item, i) => {
          return (
            <div key={i}>
              <div>
                <div>{item.icon}</div>
                <div>{item.text}</div>
              </div>
              <div>
                {item.links.map((links, i) => (
                  <a className={STYLES.link} key={i} href={link.link}>
                    <div>{link.title}</div>
                  </a>;
                })}
              </div>
            </div>
          );
        ))}

Нужночтобы иметь возможность вытащить первый объект ссылки из массива ссылок (т. е. { link: "www.twitter.com", title: "Google" },), я хочу, чтобы он появился в списке вверху и был обернут в другой div, чтобы диктовать липкие стили.

Answer 1

Я не уверен, что testNav в вашем предложенном решении.Попробуйте заменить testNav на item.links.Я не тестировал этот код, но думаю, что он будет выглядеть следующим образом:

{nav.map((item, i) => {
      return (
        <div key={i}>
          <div>
            <div>{item.icon}</div>
            <div>{item.text}</div>
          </div>
          <div>
            {item.links.map((link, i) => {
              return (    
                  <a className={STYLES.link} key={i} href={link.link}>
                    <div>{link.title}</div>
                  </a>;
              )
            })}
          </div>
        </div>
      );
    })}

Возможно, вы захотите рассмотреть вопрос о переименовании ваших свойств, так как link.link не очень наглядно.

Answer 2

Вам следует заменить testNav на уникальный элемент, который вы уже получили от карты в качестве первого аргумента.Также на второй карте вы делаете => {, если вы делаете это, вам нужно иметь ключевое слово return.Если вы замените { на (, вам не нужно.

{nav.map((item, i) => {
          return (
            <div key={i}>
              <div>
                <div>{item.icon}</div>
                <div>{item.text}</div>
              </div>
              <div>
                {item.links.map((itemLink, i) => (
                  <a className={STYLES.link} key={itemLink.link} href={itemLink.link}>
                    <div>{itemLink.title}</div>
                  </a>;
                ))}
              </div>
            </div>
          );
        })}