Ошибка рендеринга данных в функциональном компоненте

Question

Я пытаюсь отобразить список элементов нижнего колонтитула в компоненте функции.

Вот мои данные:

export const footerLinks = [{
  "title": "Learn More",
  "data": [{
      id: 'news',
      name: 'News',
      to: '/news'
    },
    {
      id: 'faq',
      name: 'FAQ',
      to: '/faq'
    }
  ]
},
{
  "title": "Media",
  "data": [{
      id: 'media',
      name: 'Media Kit',
      to: '/media'
    },
    {
      id: 'media_enquiries',
      name: 'Media Enquiries',
      to: '/media_enquiries'
    }
  ]
}]

Я импортирую данные и пытаюсь вывести их в<ul>.console.log в функции MyListItems выводит ожидаемые значения.Однако, после forEach, запись listItems показывает, что это undefined, и только пустой <ul></ul> попадает на экран.

Есть идеи, что здесь происходит?

import { footerLinks } from '../site'

function MyListItems() {
  const listItems = footerLinks.forEach(section => {
    section.data.map(({id, name, to}) => {
      console.log(id, name, to);
      <li>{name}</li>
    })
  });

  return (
    <ul>{listItems}</ul>
  );
}

export function Footer() {
  return (
    <div>
      <MyListItems />
    </div>
  )
}

Answer 1

forEach не возвращает ничего из цикла, означает, что он вернет undefined, вместо него будет использоваться map

 const listItems = footerLinks.map(section => {
    return section.data.map(({id, name, to}) => {
      console.log(id, name, to);
      return <li>{name}</li>
    })
  });

forEach возвращаемое значение