title: ReactJS encounter with "Target container is not a DOM element", tried a lot solution but not worked
body: <p>I'm doing a simple react app, I want to write a function to loop through my array using map() and display them on the page, but I encountered with a problem says "target container is not a DOM element", I've tried a lot solutions online but none of them worked for me, is there anyone can help me, thank you.</p>
  
  <p>This is the first file, and this displays each element.</p>
  
  <pre><code>   import React, { Component } from 'react';
     import logo from './logo.svg';
     import './App.css';
  
     import Header from './components/Header.js';
     import Summary from './components/Summary.js';
     import Education from './components/Education.js';
     import Project from './components/Project.js';
     import Experience from './components/Experience.js';
  
     class App extends Component {
       render() {
        return (
          &lt;body className="App"&gt;
           &lt;Header /&gt;
            &lt;Summary /&gt;
             &lt;Education /&gt;
              &lt;Experience /&gt;
               &lt;Project /&gt;
          &lt;/body&gt;
          );
       }
     }
  
     export default App;
  </code></pre>
  
  <p>This is the second file, and this is for Project display.</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  function Project(props) {
    const content = props.projects.map((project) =&gt;
      &lt;div key={project.id}&gt;
        &lt;h3 className="ProjectTitle"&gt;{project.title}&lt;/h3&gt;
        &lt;p className="ProjectDetail"&gt;{project.detail}&lt;/p&gt;
      &lt;/div&gt;
    );
  
    return(
      &lt;div&gt;
        {content}
      &lt;/div&gt;
    );
  }
  
  const projects = [
    {id: 1, title: 'Consumer Electronics Retailer Web Application',
      detail: 'Consumer Electronics Retailer Web Application1',
      detail: 'Consumer Electronics Retailer Web Application2',
      detail: 'Consumer Electronics Retailer Web Application3'},
    {id: 2, title: 'Hotel Reservation Web Application',
      detail: 'Hotel Reservation Web Application1',
      detail: 'Hotel Reservation Web Application2',
      detail: 'Hotel Reservation Web Application3'},
    {id: 3, title: 'Android Library Management Application',
      detail: 'Android Library Management Application1',
      detail: 'Android Library Management Application2',
      detail: 'Android Library Management Application3'}
  ];
  
  ReactDOM.render(
    &lt;Project projects={projects} /&gt;,
      document.getElementById('Project')
  );
  
  export default Project;
  </code></pre>