React JSX in JSON array of object map-CodePudding

A JSON array of icons with names is available. I want to map JSX but nothing shows as JSX element (icons) in the output, the code uses Material-UI elements and Icons:

import * as React from 'react';
import {Box, Paper, Typography} from '@mui/material';
import WorkIcon from '@mui/icons-material/Work';
import Settings from '@mui/icons-material/Settings';
const iconsSet = [
  {
    name: 'WorkIcon',
    icon: ()=> (<WorkIcon/>),   {/* JSX as fields value */}
  },
  {
    name: 'Settings',
    icon: () =>(<Settings/>),
  }
];
export default function Icons() {
  return (
    <Box>
      {iconsSet.map(({name,icon})=>(
        <Paper>
          {icon} {/* Nothing Shows  */}
          <Typography>{name}</Typography>
        </Paper>
      ))}
    </Box>
    );
}

link to Codesandbox

CodePudding user response：

You have to name JSX elements with capital first letter, try Icon in the object key:

const iconsSet = [
  {
    name: 'WorkIcon',
    Icon: ()=> (<WorkIcon/>),   {/* JSX as fields value */}
  },
  {
    name: 'Settings',
    Icon: () =>(<Settings/>),
  }
];

And then use it in JSX inside the map() like this:

<Box>
  {iconsSet.map(({name,Icon})=>(
    <Paper>
      <Icon />
      <Typography>{name}</Typography>
    </Paper>
  ))}
</Box>

CodePudding user response：

try

import * as React from 'react';
import {Box, Paper, Typography} from '@mui/material';
import WorkIcon from '@mui/icons-material/Work';
import Settings from '@mui/icons-material/Settings';
const iconsSet = [
  {
    name: 'WorkIcon',
    icon: ()=> (<WorkIcon/>),   {/* JSX as fields value */}
  },
  {
    name: 'Settings',
    icon: () =>(<Settings/>),
  }
];
export default function Icons() {
  return (
    <Box>
      {iconsSet.map(({name,icon})=>(
        <Paper>
          {icon()} {/* here is the change  */}
          <Typography>{name}</Typography>
        </Paper>
      ))}
    </Box>
    );
}