React js: How to set details in JSX components that are stored in a variable

Question

Suppose I already defined a component:

class Co extends React.Component {
    render = () => {
        const name = this.props.name;
        return (
            <p>Hello, my name is {name}</p>
        )
    }
}

and save it in a variable:

const co = <Co />;

How to configure component details using a variable? Does it work co.props.set?

Answer 1

As far as I understand, you do not want to display your component in JSX syntax, but with your saved variable. You can take a look React.cloneElement. This should do what you want:

{React.cloneElement(co, {name: 'hans'})}

See: https://facebook.imtqy.com/react/docs/top-level-api.html#react.cloneelement

Answer 2

You can set the details as usual

<Co name="Name"/>

- , React.cloneElement()

class Parent extends React.Component {
    render = () => {
        const name = this.props.name;
        return (
            <SomeComp><Co/></SomeComp>
        )
    }
}
class SomeComp extends React.Component {
    render = () => {
        const name = this.props.name;
        return (
            <SomeComp>{React.cloneElement(this.props.children, {name:"Name"})}</SomeComp>
        )
    }
}