Next.js Discord

Discord Forum

React.createElements not rendering icons from data

Answered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Hey guys im using @icons-pack/react-simple-icons and frame-motion so i want to animate the components, i have a data the problem is data.icon is not rendering or not being converted in an element
Answered by Cape lion
Thank you for the help, seems that cloneElement doesn't work getting an error Element type is invalid, but i found the solution, i just had to import all the icons into my data.tsx files and it worked
View full answer

2 Replies

@Cape lion Hey guys im using @icons-pack/react-simple-icons and frame-motion so i want to animate the components, i have a data the problem is data.icon is not rendering or not being converted in an element
Ray
try this
import {SiHtml5} from '@icons-pack/react-simple-icons'

export const relatedFieldSkillsData = [
  { icon: SiHtml5, color: .....}
] 



<motion.li>
  ...
  React.cloneElement(data.icon, { className: '', color: data.color})
</motion.li>
@Ray try this ts import {SiHtml5} from '@icons-pack/react-simple-icons' export const relatedFieldSkillsData = [ { icon: SiHtml5, color: .....} ] <motion.li> ... React.cloneElement(data.icon, { className: '', color: data.color}) </motion.li>
Cape lionOP
Thank you for the help, seems that cloneElement doesn't work getting an error Element type is invalid, but i found the solution, i just had to import all the icons into my data.tsx files and it worked
Answer