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?

Answer 1

JSX expects components to have capitalized names

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

or better:

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