title: can't reach unordered list if it's created in the return of the render function
body: <p>I need to get the same result I got, just by using react
  I can't seem to find a way to reach the unorderd list if I creat it in the return of the render function, I'm new to react and just found out that getElementById just returns null in this case</p>
  
  <p>(create an unordered list, Clicking on one of the items toggle the color of the item's text color)</p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  import './style.css';
  
  
  var defaultColor = 'black'
  var specialColor = 'red'
  var itemList =[1,2,3,4,5]
  var id = document.getElementById('list')
  
  class App extends Component {
    constructor() {
  super();
  this.state = {
    name: 'React'
  }
  function toggleColor(ctrl)
  {       
      if(ctrl.color == specialColor){
        ctrl.color = defaultColor
      }
      else{
      ctrl.color = specialColor;
    }
  }
  function createLiWithColorToggle(item){
  
    var newLi= document.createElement('li')
    var newFont= document.createElement('font')
    newFont.innerHTML = item
    newFont.onclick = ()=&gt;toggleColor(newFont)
  
    newLi.appendChild(newFont)
    id.appendChild(newLi)
  }
  itemList.forEach((item)=&gt;{
    createLiWithColorToggle(item)
  })
      };
  
    render() {
  return (
    &lt;div&gt;
  
    &lt;/div&gt;
  );
    }
  }
  
  render(&lt;App/&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>HTML file:</p>
  
  <pre><code>&lt;div id="root"&gt;&lt;/div&gt;
  
  &lt;ul id = "list"&gt;&lt;/ul&gt;
  </code></pre>