ReactDOM.findDOMNode() return null with refs - reactjs

Question

ReactDOM is not working with refs.
I want to sting html <b>abcd</b> append to body of modal, but it's not working.
when I check console.log() of modal and modalBody, it return null.
My code in under:
class Header extends Component {
constructor(props) {
super(props);
this.state = {
this.state.modalSendResult: false
};
}
_open() {
this.setState({
modal: !this.state.modal
});
if (!this.state.modal) {
this.appendNode();
}
}
appendNode() {
let modal = ReactDOM.findDOMNode(this.refs.modal)
modalBody = ReactDOM.findDOMNode(this.refs.body);
ReactDOM.render(
<b>abcde</b>, modalBody
);
}
render() {
return (
<Button onClick={this._open.bind(this)}
className="btn btn-primary btn-primary-1 mr-1">
<i className="fa fa-paper-plane-o" aria-hidden="true"></i> Open
</Button>
<Modal ref="modal" isOpen={this.state.modal} toggle={this._open}
className={'modal-primary modal_customer'}>
<ModalHeader toggle={this._open}>
Danh sách kết quả gửi
</ModalHeader>
<ModalBody className="modal-send" ref="body">
</ModalBody>
</Modal>
);
}
}
Please help me!

Answer 1

Take a look at ReactDOM. You can avoid having to call findDOMNode by setting up your refs as specified here: Refs and the DOM.
I think in your case it would look something like
<Modal
ref={(modal) => { this.modal = modal; }}
isOpen={this.state.modal}
toggle={this._open}
className={'modal-primary modal_customer'}
>
<ModalHeader toggle={this._open}>
Danh sách kết quả gửi
</ModalHeader>
<ModalBody
className="modal-send"
ref={(body) => { this.body = body; }}
/>
</Modal>
Then you should be able to reference them with
this.modal
this.body
Alternatively, you could pass the content you want for your ModalBody component as a prop.
<ModalBody
className="modal-send"
content="abcde"
ref={(body) => { this.body = body; }}
/>
And render in your ModalBody component:
render() {
return (
<b>{this.props.content}</b>
);