title: Why Doesn't My Code Work When Converting From ES5 To ES6 Syntax?
body: <p>I'm new to React and working my way through how to use 'props' and 'state' in online course. Online course uses ES5, but my IDE is set up for ES6. I've gotten through converting most examples just fine. But the following is baffling. The example works fine, but my ES6 conversion doesn't--the page renders blank. I looked through "Questions that may already have your answer", but nothing reveals my omission(s)/mistake(s). I was validated on other changes syntactically though. :)</p>
  
  <hr>
  
  <h2>My conversion in 'App.js' file</h2>
  
  <pre><code>import React, { Component } from 'react';
  
  let green = '#39D1B4';
  let yellow = '#FFD712';
  
  class Toggle extends Component {
  
    getInitialState() {
      return {color: green};
    }
  
    changeColor(){
      let newColor = this.state.color === green ? yellow : green;
      this.setState({color: newColor});
    }
  
    render() {
      return (
        &lt;div style={{background: this.state.color}}&gt;
          &lt;h1&gt;
            Change My Color
          &lt;/h1&gt;
          &lt;button onClick={this.changeColor}&gt;
            Change Color
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Toggle;
  </code></pre>
  
  <hr>
  
  <h2>My conversion in 'index.js' file</h2>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Toggle from './App';
  
  ReactDOM.render(
    &lt;Toggle /&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <hr>
  
  <h2>'index.html' file</h2>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Call 'this.setState' From Another Function&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <h2>$ npm start says:</h2>
  
  <p>Compiled successfully!</p>
  
  <p>The app is running at:</p>
  
  <p><a href="http://localhost:3000/" rel="nofollow noreferrer">http://localhost:3000/</a></p>
  
  <p>Note that the development build is not optimized.
  To create a production build, use npm run build.</p>
  
  <hr>
  
  <h2>Yes, I got the following from the Console:</h2>
  
  <pre><code>Warning: getInitialState was defined on Toggle, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?
  printWarning @ warning.js:36
  App.js:20Uncaught TypeError: Cannot read property 'color' of null
      at Toggle.render (App.js:20)
      at ReactCompositeComponent.js:796
      at measureLifeCyclePerf (ReactCompositeComponent.js:75)
      at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
      at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
      at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
      at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
      at Object.mountComponent (ReactReconciler.js:46)
      at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
      at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
  content.js:4186 Uncaught TypeError: Cannot read property 'indexOf' of null
      at content.js:4186
  </code></pre>
  
  <p>Looks like everything works fine after adding a constructor, binding the method and fixing the onClick syntax. Direction is appreciated. Thanks.</p>