CODEWITHSUNDEEP
javascriptreactjs
Abe Choi
Abe Choi

Reputation: 37

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

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?

Upvotes: 1

Views: 176

Answers (1)

brietsparks
brietsparks

Reputation: 5016

JSX expects components to have capitalized names

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

or better:

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

Upvotes: 2

Related Questions