title: this.state is null inside render React and Typescript
body: <p>I am a novice in ReactJS. Was watching a tutorial that is recorded in ES6 JavaScript and simultaneously I am trying to recreate the same app in TypeScript (I am a novice in TypeScript too!!). In ES6 we need to use a class based approach if that particular component needs to maintain it's own state. I have installed <code>"babel-plugin-transform-class-properties"</code> so i do set state in ES6 as <code>export default class SomeClass { state = {
  someProperty : someValue }}</code>. But in TypeScript I am using class based approach for every component. So here is a component that tries to maintain it's own state:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  
  interface IAddOptionProps {
      handleAddOption: (option: string) =&gt; string |null;
  };
  
  interface IAddOptionState {
      error: any;
  };
  
  export default class AddOption extends React.Component&lt;IAddOptionProps, IAddOptionState&gt; {
      handleAddOption = (e:any) =&gt; {
          e.preventDefault();
          const option = e.target.elements.option.value.trim();
          const err : string = this.props.handleAddOption(option);
  
          this.setState(() =&gt; {
              return {
                  error: err
              }
          });
  
          if (!err) {
              e.target.elements.option.value = '';
          }
      }
  
      render() {
          console.log(this.state);
          return (
              &lt;div&gt;
                  {this.state.error != null ? &lt;p&gt;{this.state.error}&lt;/p&gt; : ''}
                  &lt;form onSubmit={this.handleAddOption}&gt;
                      &lt;div className="form-group"&gt;
                          &lt;label&gt;Enter an Option&lt;/label&gt;
                          &lt;input type="text" className="form-control" id="option"  name="option"/&gt;
                      &lt;/div&gt;
                      &lt;button className="btn btn-primary"&gt;Add option&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>The statement <code>console.log(this.state);</code> and  <code>{this.state.error != null ? &lt;p&gt;{this.state.error}&lt;/p&gt; : ''}</code> inside render() is throwing error stating that <code>Uncaught TypeError: Cannot read property 'error' of null</code>. That means <code>this.state</code> is being set as null.</p>
  
  <p>Why is state getting set to null and how do I resolve this ( In TypeScript )?</p>
  
  <p>Thanks in Advance. </p>