React.CloneElement returns an object instead of a function

Question

I find it difficult to understand the behavior of a function React.cloneElement()

I have a component structure something like this

A.js

export default class A extends React.Component {
     render() {
         return (<h1>{ this.props.message }</h1>)
     }
 }

B.js

import A from "./A"

const newComponent = React.cloneElement(A,{
    message: "Hello World"
})

export default newComponent

C.js

import B from "./B"
import { BrowserRouter as Router, Route } from "react-router-dom"

// To Be very precise
 export default class C extends React.Component {
     render() {
         return (
             <Router>
                <Route path="/" component={B}  />
            </Router>
         )
     }
 }

But I get this error

An invalid prop componenttype objectsupplied in Routeis expected function.

but when I pass the component Adirectly to the component Route, it displays fine.

When I console.logComponent Ainside the Component rendering function C, I get a function, but When I console.logComponent Binside the Component rendering function C, I get an object

What am I missing?

Answer 1

React component React element. .

jsx, A component <A /> element. React.cloneElement, , element , component. , , , React.cloneElement,

const newComponent = React.cloneElement(<A />,{
    message: "Hello World"
})

-, Route React component component prop, React.cloneElement React element ( , newComponent , ). newComponent B.js. component. class component/stateless component. , B.js .

// B.js
import A from "./A"

const newComponent = React.cloneElement(<A />, {
  message: "Hello World"
})

export default class B extends React.Component {
  render() {
    return (<div>{newComponent}</div>)
  }
}

, cloneElement . B.js, A. .