title: uncaught error: cannot read property length of null
body: <p>I keeep on getting this error anytime I run my app.. it loads the scss file but the js script throws this error.</p>
  
  <pre><code>TypeError: Cannot read property 'length' of undefined
  at IndecisionApp.render (IndecisionApp.js?8eb7:80).... 
  </code></pre>
  
  <p>here is my IndecisionApp component </p>
  
  <pre><code>import React from 'react';
  import AddOption from './AddOption';
  import Action from './Action';
  import Header from './Header';
  import Options from './Options';
  import OptionModal from './OptionModal';
  
  export default class IndecisionApp extends React.Component {
  constructor(props) {
      super(props);
      this.handleDeleteOptions = this.handleDeleteOptions.bind(this);
      this.handlePick = this.handlePick.bind(this)
      this.handleAddOption = this.handleAddOption.bind(this)
      this.handleDeleteOption = this.handleDeleteOption.bind(this);
      this.handleClearSelectedOption = this.handleClearSelectedOption.bind(this);
      this.state = {
          option: [],
          selectedOption: undefined
      }
  }
  
  handleDeleteOptions (){
      this.setState(() =&gt; ({ options: [] }));
  };
  handleClearSelectedOption () {
      this.setState(() =&gt; ({ selectedOption: undefined }));
  }
  handleDeleteOption (optionToRemove){
      this.setState((prevState) =&gt; ({
          options: prevState.options.filter((option) =&gt; optionToRemove !== option)
      }));
  };
  handlePick () {
      const randomNum = Math.floor(Math.random() * this.state.options.length);
      const option = this.state.options[randomNum];
      this.setState(() =&gt; ({
          selectedOption: option
      }));
  };
  handleAddOption (option){
      if (!option) {
          return 'Enter valid value to add item';
      } else if (this.state.options.indexOf(option) &gt; -1) {
          return 'This option already exists';
      }
  
      this.setState((prevState) =&gt; ({
          options: prevState.options.concat(option)
      }));
  };
  componentDidMount() {
      try {
          const json = localStorage.getItem('options');
          const options = JSON.parse(json);
  
          if (options) {
              this.setState(() =&gt; ({ options }));
          }
      } catch (e) {
          // Do nothing at all
      }
  }
  componentDidUpdate(prevProps, prevState) {
      if (prevState.options.length !== this.state.options.length) {
          const json = JSON.stringify(this.state.options);
          localStorage.setItem('options', json);
      }
  }
  componentWillUnmount() {
      console.log('componentWillUnmount');
  }
  render() {
      const subtitle = 'Put your life in the hands of a computer';
  
      return (
          &lt;div&gt;
              &lt;Header subtitle={subtitle} /&gt;
              &lt;div className="container"&gt;
                  &lt;Action
                      hasOptions={this.state.options.length &gt; 0}
                      handlePick={this.handlePick}
                  /&gt;
                  &lt;div className="widget"&gt;
                      &lt;Options
                          options={this.state.options}
                          handleDeleteOptions={this.handleDeleteOptions}
                          handleDeleteOption={this.handleDeleteOption}
                      /&gt;
                      &lt;AddOption
                          handleAddOption={this.handleAddOption}
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;OptionModal
                  selectedOption={this.state.selectedOption}
                  handleClearSelectedOption={this.handleClearSelectedOption}
              /&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Please help me out. I have spent days trying to solve this issue to no avail. I tried all I could trying to fix this bug in the code.</p>