ReactJS: Change html/jsx element dynamically - reactjs

Question

I wanna change my JSX element tag dynamically but the remaining attributes stay the same.
Let's say I have something like this:-
import React, { useState } from 'react'
import classNames from 'classnames'
import { makeStyles } from '#material-ui/core/styles'
import DesktopWindowsIcon from '#material-ui/icons/DesktopWindows'
import DnsIcon from '#material-ui/icons/Dns'
import StorageIcon from '#material-ui/icons/Storage'
import CloudIcon from '#material-ui/icons/Cloud'
export const try = () => {
const classes = useStyles()
const [changeIconColor, setChangeIconColor] = useState('')
const icons = [
{ id: 0, icon: <DesktopWindowIcon /> },
{ id: 1, icon: <DnsIcon /> },
{ id: 2, icon: <StorageIcon /> },
{ id: 3, icon: <CloudIcon /> },
]
return (
<>
{icons.maps(icon => (
<>
{/* this will work */}
{icon.icon}
</>
))}
</>
)
}
const useStyles = makeStyles((theme) => ({
icon: {
width: 100,
height: 100,
marginBottom: 12,
},
iconMouseHover: {
color: theme.palette.secondary.main
}
}))
But what I wanna do is something like this:-
import React, { useState } from 'react'
import classNames from 'classnames'
import { makeStyles } from '#material-ui/core/styles'
import DesktopWindowsIcon from '#material-ui/icons/DesktopWindows'
import DnsIcon from '#material-ui/icons/Dns'
import StorageIcon from '#material-ui/icons/Storage'
import CloudIcon from '#material-ui/icons/Cloud'
export const try = () => {
const classes = useStyles()
const [changeIconColor, setChangeIconColor] = useState('')
const icons = [
{ id: 0, icon: <DesktopWindowsIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon, classes.iconMouseHover) : classes.icon} /> },
{ id: 1, icon: <DnsIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon, classes.iconMouseHover) : classes.icon} /> },
{ id: 2, icon: <StorageIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon, classes.iconMouseHover) : classes.icon} /> },
{ id: 3, icon: <CloudIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon, classes.iconMouseHover) : classes.icon} /> },
]
return (
<>
{icons.maps(icon => (
<>
{/* this will not work since it gave me an error saying icon is not defined in array above */}
{icon.icon}
</>
))}
</>
)
}
const useStyles = makeStyles((theme) => ({
icon: {
width: 100,
height: 100,
marginBottom: 12,
},
iconMouseHover: {
color: theme.palette.secondary.main
}
}))
Is there any ways for me to do this dynamically with React?
Something that can change the icon tag but the remaining attributes stay the same:-
// only tag name changes
<OnlyThisChange className={changeIconColor === skill._id ? classNames(classes.icon, classes.iconMouseHover) : classes.icon} />
Is this possible with react?

Answer 1

yes, this possible.
First of all, you don't need to write a key in the icon component. Prop key must be defined in the Fragment element(<> -> <React.Fragment key={icon.id}>).
Your example is almost correct, one mistake that you're doing is:
changeIconColor === icon.id
instead of the above example, you can hardcode your ids:
changeIconColor === 1