React render string interpolated component passed via attribute of parent component-CodePudding

I am trying to render a function based on an array of Object values. React is rendering as a string rather than a component. The desired component render is an imported Icon. I have tried various solutions found in other questions related to , react-jsx-parse, and so on. Non of these solutions have worked for this case.

import {
  LinkedIn,
  GitHub,
  Instagram,
  Camera,
  Favorite,
  Palette,
  Motorcycle,
} from "@mui/icons-material"; 
import myJsonInfo from "./myJsonInfo";
import AppBar from "@mui/material/AppBar";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";

function myPage(){

return (
...
               <AppBar position="static">
                  <Tabs
                    value={value}
                    onChange={handleChange}
                    indicatorColor="secondary"
                    textColor="inherit"
                    variant="fullWidth"
                    aria-label="full width tabs example"
                  >
                    {myJsonInfo.map((tab, id) => ( 
                      <Tab
                        label={tab.tabButton}
                        icon={`<${tab.tabIcon} sx={{ fontSize: 40 }} />`}
                        iconPosition="top"
                        key={id}
                      />
                    ))}
                  </Tabs>
                </AppBar>
...
)

I am expecting the interpolation to render...but the actual render is ...

...
icon={<Camera sx={{ fontSize: 40 }} />}    
icon={"<Camera sx={{ fontSize: 40 }} />"}
...

Here is the json object...

export const myJsonInfo = [
  {
    tabButton: "PHOTOGRAPHY",
    tabIcon: "Camera",
    photos: [
      {
        src: "https://live.staticflickr.com/4894/45935502555_2f67f4525e_m.jpg",
        width: "240",
        height: "180",
        alt: "20190110_131623"
      },
      {
        src: "https://live.staticflickr.com/4413/36739958362_d6b357e792_m.jpg",
        width: "240",
        height: "86",
        alt: "_DSC1990-Pano"
      },
      {
        src: "https://live.staticflickr.com/849/39718694400_97c278f836_m.jpg",
        width: "240",
        height: "160",
        alt: "_DSC3436"
      },

      {
        src: "https://live.staticflickr.com/869/40528225894_2eac07c24e_m.jpg",
        width: "240",
        height: "180",
        alt: "GOPR0332"
      },
      {
        src: "https://live.staticflickr.com/1846/44291032431_9050d0e351_m.jpg",
        width: "240",
        height: "97",
        alt: "20180818_082245"
      },
      {
        src: "https://live.staticflickr.com/933/43285116024_690e779504_m.jpg",
        width: "240",
        height: "117",
        alt: "20180812_114422"
      }
    ]
  },
...

CodePudding user response：

try something like this:

create an object that contains your icon components:

import {
  LinkedIn,
  GitHub,
  Instagram,
  Camera,
  Favorite,
  Palette,
  Motorcycle,
} from "@mui/icons-material";
const iconComponents = { LinkedIn, GitHub /* ... */ };

if you want to use an icon component, assign its name to a local variable:

{myJsonInfo.map((tab, id) => {
 const Icon = iconComponents[tab.tabIcon];
 return <Tab
   label={tab.tabButton}
   icon={<Icon sx={{ fontSize: 40 }} />}
   iconPosition="top"
   key={id}
 />
})}

CodePudding user response：

after using map looping, u must to return.