call a same instance component multiple times ReactJS

Question

I have next modal component in React:

class Modal extends Component {
 render(){
 return( 
 <div className="modal-content">
 <div className="modal-header">
 { this.props.modalHeader }
 </div>
 <div className="modal-body" className={this.props.className}>
 { this.props.modalBody }
 </div>
 <div className="modal-footer">
 { this.props.modalFooter }
 </div>
 </div>);
 }
}

And I'm using it this way:

 render(){
 return(
 <Modal 
 modalHeader={<ContentComponent getSection='header'/>}
 modalBody={<ContentComponent getSection='body'/>}
 modalFooter={<ContentComponent getSection='footer'/>}
 />
 );
 }

There is any way to get a reference of ContentComponent and pass this same reference into the 3 props?

I have tried reference in a constant but doesn't work.

• Shammoo: I need some clarification of what you mean by "reference of ContentComponent"? Are you referring to createRef(), or do you just mean a shared instance? Also, what are you trying to achieve?
• Jose Rojas: @Shammoo I mean to a share instance, I want to create some functions on the ContentComponent and share information between 3 sections elements

Answer 1

You could create a function that returns a ContentComponent

const ccWrapper = (section)=>(<ContentComponent getSection={section}/>)
//later in code
modalHeader={ccWrapper('header')}

If ContentComponent is a function it's even easier:

modalHeader={ContentComponent({getSection:'header'})}

You could also let getSection be set by Modal:

<Modal cc={ContentComponent} />
//in modal
const {cc:ContentComponent} = props;
//...
<div className="modal-header">
 <ContentComponent getSection="header" />

• Jose Rojas: Last one I'm getting error: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined
• HMR: @JoseRojas are you sure you're passing ContentComponent as a prop called cc to Modal? In Modal ContentComponent is undefined so either you didn't pass it correctly or you didn't destructure it correctly.
• Jose Rojas: Yes, I'm sure I'm passing ContentComponent as cc to Modal, when I look at cc is a function
• HMR: @JoseRojas did you log out what ContentComponent is in Modal?
• Jose Rojas: If I log ContentComponent into modal is undefined, but if I log cc is a function.