Передать компоненты React как часть массива других данных?

Question

Как правильно передать компоненты React как часть массива?

Я хочу передать эти данные нескольким компонентам меню. Оба компонента Icon принимают реквизиты, которые также необходимо будет передать:

import IconAbout from "./icons/about";
import IconContact from "./icons/contact";

const links: { text: string; icon: any }[] = [
  { text: "Contact", icon: IconContact },
  { text: "About", icon: IconAbout },
];

Использование:

  {links.map((item, index) => {
    return (
      <>
        <p>{item.text}</p>
        <item.icon isDark={true} />
      </>
    );
  })}

Answer 1

Один вариант для вашей ситуации

import IconAbout from "./icons/about";
import IconContact from "./icons/contact";

const links = [
  { text: "Contact", icon: <IconContact isDark={true}/> },
  { text: "About", icon: <IconAbout isDark={true}/> },
];

  {links.map((item, index) => {
    return (
      <>
        <p>{item.text}</p>
        {item.icon}
      </>
    );
  })}

---

Демо: