title: Unable to manipulate the DOM in a React component
body: <p>I can't manipulate the <code>&lt;div id="chart"&gt;</code> either in <strong>componentWillMount</strong> or <strong>componentDidMount</strong> lifecycle methods.</p>
  
  <p><code>document.getElementById("chart")</code> returns <strong>null</strong> in both the methods. Should I not use the raw DOM manipulation function or should I use something else to achieve the same which is manipulate the <code>&lt;div id="chart"&gt;</code></p>
  
  <pre><code>import React from 'react'
  
  export default class D3Chart extends React.Component {
      constructor () {
          super();
      }
  
      componentWillMount() {
           document.getElementById("chart").innerText = "Testing";
      }
  
      componentDidMount () {
          document.getElementById("chart").innerText = "Testing";
      }
  
      render() {
              return (&lt;div id="chart"&gt;&lt;/div&gt;
          )
      };
  }
  </code></pre>