How to display nested HTML content with {this.props.children}? - reactjs

Question

I'm trying to display standard HTML content that is nested within a React modal component. I thought using {this.props.children} within the component would allow the nested HTML to be displayed, but the paragraph doesn't appear within the modal when it's open. I want to keep the content within the HTML file and out of the React Component.
A codepen of the issue is here.
HTML:
<div id="testModal">
<p>Content to be displayed within modal</p>
</div>
JS:
class Modal extends React.Component {
constructor(props) {
super(props);
this.state = {
isModalOpen: false
};
// bind functions
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
}
// close modal
closeModal() {
this.setState({isModalOpen: false});
}
// open modal
openModal() {
this.setState({isModalOpen: true});
}
render() {
return (
<React.Fragment>
<div className="link" onClick={this.openModal}>Click Me</div>
<div id="modal" className="modal__outter" style={{
display: this.state.isModalOpen
? 'block'
: 'none'
}}>
<div className="modal__overlay" onClick={this.closeModal}></div>
<div onClick={this.state.closeModal}></div>
<div className="modal__container">
<div className="modal__header">
<button onClick={this.closeModal} className="link">X</button>
</div>
<div className="modal__content">
{this.props.children}
</div>
<div className="modal__footer">
<button className="link" onClick={this.closeModal}>Close</button>
</div>
</div>
</div>
</React.Fragment>
);
}
}
ReactDOM.render(
<Modal />,
document.getElementById('testModal')
);

Answer 1

this.props.children refers to component passed in from your React code, not from HTML file.
So pass the modal content in ReacDOM.render
ReactDOM.render(
<Modal>
<p>Content to be displayed within modal</p>
</Modal>,
document.getElementById('testModal')
);
Here is the forked CodePen.
Answer to the comment is there a way to pass the content in from the HTML file
Yes, you can but you still need to pass the content somehow.
I've used document.getElementById to get the modal content, and passed it to <Modal> as a child.
(If you are planning to use this.props.children that is. Or else you can just get the content from HTML with document.get/querySelect...)
Here is the updated CodePen.