React - How to return a component with a dynamic name?

Question

I am trying to return a component without a set name at runtime. Like so:

<div className="project-demo">
  <CustomComponent demo={project.demo}/>
</div>

and being called like this:

const CustomComponent = ({ demo }) => {

  return (
    <{ demo } />    
  )
}

Any advice?

Can you elaborate on the problem you are trying to solve? I don't think what you are trying to do is recommended. — Mohit Mutha
– Mohit Mutha, Commented Aug 2, 2020 at 3:17

brietsparks · Accepted Answer · 2020-08-02 03:14:13Z

2

const CustomComponent = ({ demo }) => {
  const Demo = demo;
  
  return (
    <Demo />
  )
}

or better:

const CustomComponent = ({ Demo }) => {  
  return (
    <Demo />
  )
}

answered Aug 2, 2020 at 3:14

brietsparks

5,0468 gold badges40 silver badges74 bronze badges

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

1 Answer 1