Next.js Discord

Discord Forum

Dynamic component crreation

Answered
Pollock posted this in #help-forum
Open in Discord
PollockOP
Hello guys, how do i create a component based on a variable? I have an array like that:
Answered by Pollock
View full answer

48 Replies

PollockOP
Imported my IconPack like that:
import * as IconPack from '@tabler/icons-react';
and using it in code like that
results in:
i need to dynamically create these as i pull achievements from the database
New Guinea Singing Dog
You'll need to pass the object as props
to the component
@New Guinea Singing Dog You'll need to pass the object as props
PollockOP
can you explain a bit more? You mean i should create new component that just creates <Icon.propName /> and use it here or what exactly?
or is there like <IconPack propname>?
@Pollock and using it in code like that
New Guinea Singing Dog
So where the icon_name variable is in that achievement, you want the icon name from the obj?
@Pollock or is there like <IconPack propname>?
New Guinea Singing Dog
yeah pass it as a parameter
@New Guinea Singing Dog So where the icon_name variable is in that achievement, you want the icon name from the obj?
PollockOP
icon_name is just a string pulled from database, it can be adjusted however it needs to be
New Guinea Singing Dog
so itll look like 
export function Page({obj}) {
  return (
    <achievement obj.icon_name/>
  )
}
`
PollockOP
i mean that <achievement.icon_name> should be <IconCar /> for example
i used IconPack.IconCar as it's pulled from an array so i can add new achievements into the database without touching the next.js itself
New Guinea Singing Dog
I'm not sure you're able to, I think you'll have to use like
if statements
Or like a switch statement I dont think youre able to pass the string variable directly as a component
only as a prop
PollockOP
thats not possible(i mean possible, but it'll be trash-looking) as there might be hundreds of achievements
New Guinea Singing Dog
So do you have lots of components that are like
<IconCar/>
<IconTruck/>
etc?
and how are you getting the files
cause it might be easier to just have it as
<Icon/> and pass the prop
Do you have it like as imgs in your /public folder? Then could just use string interpolations to render it out according to the file name
@New Guinea Singing Dog and how are you getting the files
PollockOP
from a public package '@tabler/icons-react';
i posted it above
New Guinea Singing Dog
Ok i did some digging, seems like you are able to pass the component as values to an obj
export const social_icons = [
      {
        id: 1,
        type: "Facebook",
        library: <FaFacebookF />,
        url: "https://facebook.com/abhishree143",
      },
      {
        id: 2,
        type: "Twitter",
        library: <FaTwitter />,
        url: "https://twitter.com/abhisri1997",
      },
      {
        id: 3,
        type: "GitHub",
        library: <FaGithub />,
        url: "https://github.com/dev-elixir",
      },
    ];
etc
So when you get the ky you'll just have to get the corresponding value
PollockOP
so how do i create a component then?
i dont quite undserstand tbh
not with a variable
New Guinea Singing Dog
Once you got the corresponding library value, you should be able to go
{value}
to render out the component
I think 😆
i have to create it first
and i dont know how to create it based on variable
New Guinea Singing Dog
No the component is the variable now
here, you have hard-coded values of <FaGithub />
i would have to have:
const varName = "FaGithub"
const component = <varName />
New Guinea Singing Dog
This seems to be the only way to do it is using an obj
PollockOP
Answer
PollockOP
somehow worked, lol