title: Why do not ReactJS render one component inside another?
body: <p>I am learning ReactJs. I want to use one componemt inside the other component. I looked <a href="https://stackoverflow.com/questions/47119579/reactjs-how-to-import-es6-custom-class?noredirect=1&amp;lq=1">this</a>, <a href="https://stackoverflow.com/questions/45747521/react-js-render-one-component-in-another">this</a> and <a href="https://stackoverflow.com/questions/33956201/how-to-import-and-export-components-using-react-es6-webpack">this</a> and other sources, tried to apply the solutions, but they did not help me...</p>
  
  <p>My <em>list.html</em> contains:</p>
  
  <pre><code>&lt;body&gt;
  ...
  &lt;div id="filtered_list"&gt;&lt;/div&gt;
  &lt;script src="built/test.js"&gt;&lt;/script&gt;
  &lt;script src="built/filteredList.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><em>test.js</em>:</p>
  
  <pre><code>'use strict';
   const React = require('react');
   const ReactDOM = require('react-dom');
   const client = require('./client');
   class Test extends React.Component {
     constructor(props) {
      super(props);
      this.state = {hellomsg: "one"};
      this.state.hellomsg = "I cannot get information from the REST. If you can, help me please.";
     }
  render() {
      client({method: 'GET', path: '/hello-world'}).done(response =&gt; {
          //this.setState({hellomsg: response.entity});
          this.state.hellomsg = response.entity;
      });
  
      return (
          &lt;p&gt;{this.state.hellomsg}&lt;/p&gt;
      )
  }
  }
  ReactDOM.render(
     &lt;Test  /&gt;,
     document.getElementById('test')
  )
  export default Test;
  </code></pre>
  
  <p><em>filteredList.js</em>:</p>
  
  <pre><code>'use strict';
   import Test from './Test';
   const React = require('react');
   const ReactDOM = require('react-dom');
   class FilteredListManger extends React.Component {
     render() {
      return (
          &lt;p&gt;Example Text&lt;/p&gt; + &lt;Test/&gt;
      )
     }
  }
  ReactDOM.render(
  &lt;FilteredListManger /&gt;,
  document.getElementById('filtered_list'))
  </code></pre>
  
  <p><em>&lt; Test / ></em> is not rendered, I have white page.</p>
  
  <p>If I remove "<em>import Test from './Test';</em>" and "<em>+ &lt; Test / ></em>" from <em>filteredList.js</em>, I can see "Example Text" text in the page, it's good.</p>
  
  <p>When I open debug mode in Chrome in <em>Sources</em> tab, I do not see errors, if I open <em>Console</em> tab, I see </p>
  
  <pre><code>Uncaught Error: _registerComponent(...): Target container is not a DOM element.
  </code></pre>
  
  <p>It leads to test.js:</p>
  
  <pre><code>ReactDOM.render(
  &lt;Test/&gt;,
  document.getElementById('test')
  )
  </code></pre>
  
  <p>I already applied solution from <a href="https://stackoverflow.com/questions/26566317/invariant-violation-registercomponent-target-container-is-not-a-dom-elem">here</a>, so I do not think this is the reason.</p>
  
  <p>All my <em>js</em> files are in <em>/src/main/js</em>. </p>
  
  <p>After <em>webpack</em> builds the project, they are in <em>/src/resources/static/build</em>. </p>
  
  <p><em>Html</em>s are in <em>/src/resources/templates</em>.</p>
  
  <p><strong>What should I change here to I can use rendered result of test.js in filteredList.js?</strong></p>