React - Как вернуть компонент с именем Dynami c?

Question

Я пытаюсь вернуть компонент без заданного имени во время выполнения. Примерно так:

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

и вызывается так:

const CustomComponent = ({ demo }) => {

  return (
    <{ demo } />    
  )
}

Есть какой-нибудь совет?

Answer 1

JSX ожидает, что компоненты будут иметь имена с заглавной буквы

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

или лучше:

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