Use createPortal API to implement RootModal

src/components/RootModal.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 
@@ -7,29 +7,27 @@ export default class RootModal extends Component {
     children: PropTypes.node,
   };
 
-  componentDidMount() {
+  constructor(props) {
+    super(props);
+
     this.modalTarget = document.createElement('div');
     this.modalTarget.className = 'intl-tel-input iti-container';
-    document.body.appendChild(this.modalTarget);
-    this._render();
   }
 
-  shouldComponentUpdate() {
-    this._render();
-
-    return false;
+  componentDidMount() {
+    document.body.appendChild(this.modalTarget);
   }
 
   componentWillUnmount() {
-    ReactDOM.unmountComponentAtNode(this.modalTarget);
     document.body.removeChild(this.modalTarget);
   }
 
-  _render() {
-    ReactDOM.render(<div>{this.props.children}</div>, this.modalTarget);
-  }
-
   render() {
-    return <noscript />;
+    return ReactDOM.createPortal(
+      <Fragment>
+        {this.props.children}
+      </Fragment>,
+      this.modalTarget
+    );
   }
 }

src/components/__tests__/RootModal.test.js

@@ -10,7 +10,7 @@ describe('RootModal', function() {
     this.makeSubject = () => {
       return mount(
         <RootModal>
-          <div>foo</div>
+          <div className="root">foo</div>
         </RootModal>,
         {
           attachTo: document.body,
@@ -19,10 +19,10 @@ describe('RootModal', function() {
     };
   });
 
-  it('should has a noscript tag', () => {
+  it('should has a div.root tag', () => {
     const subject = this.makeSubject();
 
-    expect(subject.find('noscript').length).toBeTruthy();
+    expect(subject.find('div.root').length).toBeTruthy();
   });
 
   it('should has parent element which has specific className', () => {