Render React Element within Array

Question

I have an array of items, which are defined by a string and an icon component:

type MyItem = {
  Title: string;
  Icon: React.ElementType;
};

export const MyItems: MyItem[] = [
  { Title: "Inbox", Icon: InboxIcon },
  { Title: "Users", Icon: UserIcon },
  { Title: "Settings", Icon: SettingsIcon },
];

Now I want to display them within a component:

<>
    {MyItems.map((item, index) => (
      <h1>item.Title</h1>
      // render icon component here: item.Icon
    ))}
</>

How can I render the icon component (without changing the array structure)?

Abhik Banerjee · Accepted Answer · 2022-03-18 18:26:51Z

1

I'm guessing here that your icons are essentially React Components. If so then you can try out the code below:

<>
    {MyItems.map((item, index) => (
      <>
      <h1>item.Title</h1>
      {item.Icon}
      </>
    ))}
</>

answered Mar 18, 2022 at 18:26

Abhik Banerjee

3871 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

julian.a Over a year ago

mui.com/components/material-icons Those are my icons.

julian.a Over a year ago

Already tried that and tried it again. I do get a blank screen if I put it whtin { }.

Abhik Banerjee Over a year ago

Have you tried removing ( after =>? I noticed it now that it's not needed. Try removing that bracket open and a ) on the 7th line.

Abhik Banerjee Over a year ago

As for your icons in the MyItems array, use <InboxIcon />, <UserIcon /> and <SettingsIcon /> for respective item.

julian.a Over a year ago

Thanks that did work. I used React.ReactElement instead of React.ElementType and for the Array I used <InboxIcon />, <UserIcon /> and <SettingsIcon />.

Collectives™ on Stack Overflow

Render React Element within Array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related