Почему не получается передать компонент через свойство?

Question

[MishaXXL]

Почему не получается передать компонент через свойство и как правильно передавать компоненты через свойства?

function Box() {
  return(
    <>
      <p>Box Component</p>
    </>
  )
}

function List({ component }) {
  return(
    <>
      <component />
    </>
  )
}

function App() {
  return(
    <List component={Box}  />
  )
}

Answer 1

[Михаил Р.]

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

function Box() {
  return (
    <>
      <p>Box Component</p>
    </>
  );
}

function List({Component}) {
  return (
    <>
      <Component/>
    </>
  );
}

function App() {
  return (
    <List Component={Box}/>
  );
}

export default App;

Либо:
function List({component: Component}) {

Answer 2

[historydev]

function Box() {
  return(
    <>
      <p>Box Component</p>
    </>
  )
}

-function List({ component }) {
+function List({ Component }) {
  return(
    <>
-      <component />
+     <Component />
    </>
  )
}

function App() {
  return(
-    <List component={Box}  />
+   <List Component={Box}  />
  )
}