React JSX in JSON array of object map

Question

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

Are there any errors in the console or any other information to help debug this? — Code-Apprentice
– Code-Apprentice, Commented Apr 14, 2022 at 18:17

Irfanullah Jan · Accepted Answer · 2022-04-14 18:21:02Z

2

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>

answered Apr 14, 2022 at 18:21

Irfanullah Jan

3,9204 gold badges32 silver badges37 bronze badges

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

Comments

Felipe Rodriguez Herrera · Accepted Answer · 2022-04-14 19:52:07Z

0

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>
    );
}

answered Apr 14, 2022 at 19:52

Felipe Rodriguez Herrera

4125 silver badges10 bronze badges

Collectives™ on Stack Overflow

React JSX in JSON array of object map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related