title: React page not rendering with all elements and no header
body: <p>I have a page in my react site that will load an option box of values retrieved from the server and when the user selects an item from the box, I then make another call to the server for different data (file names and a URL to download the file).</p>
  
  <p>What I can't get working is two things 1) when I select an item from the box, I get to a new page that doesn't have my header and other items that show after the render() call.  2) I can iterate through my array and get the items I need but none of my href links show.</p>
  
  <pre><code>  itemSelect(event){
  
      params.fileName= event.currentTarget[1].name
  
      restAPI.put(`/api/customers/files`, {params: event.nativeEvent.srcElement.value}).then(res =&gt;{
  
        const element = (
          &lt;div&gt;
          {Object.entries(res.data).forEach(key =&gt; {
             if(key[1].name.length &gt; 0){
                  console.log('url', key[1].url)
                  console.log('name', key[1].name)
            return &lt;a href={key[1].url}&gt;{key[1].name}&lt;/a&gt;
             }
          })}
            &lt;h1&gt;Hello, world!&lt;/h1&gt;
             &lt;h2&gt;It is {new Date().toLocaleTimeString()}.&lt;/h2&gt;
          &lt;/div&gt;
          );
  
        return ReactDOM.render(element, document.getElementById('root'));
  
        })
      }
  
    render() {
         const { folderList = {} } = this.state;
  
        return (
        &lt;div id="root"&gt;
        &lt;select name='folderListing' onChange={this.itemSelect.bind(this)}&gt;
        {Object.values(folderList).map(function(item) {
           return &lt;option key={item} name={item} id={item} value={item}&gt;{item} &lt;/option&gt;
        })}
        &lt;/select&gt;
        &lt;/div&gt;
        )
    }
  </code></pre>