Q:

uncaught error: cannot read property length of null

I keeep on getting this error anytime I run my app.. it loads the scss file but the js script throws this error.
TypeError: Cannot read property 'length' of undefined
at IndecisionApp.render (IndecisionApp.js?8eb7:80).... 

here is my IndecisionApp component 
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(() => ({ options: [] }));
};
handleClearSelectedOption () {
    this.setState(() => ({ selectedOption: undefined }));
}
handleDeleteOption (optionToRemove){
    this.setState((prevState) => ({
        options: prevState.options.filter((option) => optionToRemove !== option)
    }));
};
handlePick () {
    const randomNum = Math.floor(Math.random() * this.state.options.length);
    const option = this.state.options[randomNum];
    this.setState(() => ({
        selectedOption: option
    }));
};
handleAddOption (option){
    if (!option) {
        return 'Enter valid value to add item';
    } else if (this.state.options.indexOf(option) > -1) {
        return 'This option already exists';
    }

    this.setState((prevState) => ({
        options: prevState.options.concat(option)
    }));
};
componentDidMount() {
    try {
        const json = localStorage.getItem('options');
        const options = JSON.parse(json);

        if (options) {
            this.setState(() => ({ 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 (
        <div>
            <Header subtitle={subtitle} />
            <div className="container">
                <Action
                    hasOptions={this.state.options.length > 0}
                    handlePick={this.handlePick}
                />
                <div className="widget">
                    <Options
                        options={this.state.options}
                        handleDeleteOptions={this.handleDeleteOptions}
                        handleDeleteOption={this.handleDeleteOption}
                    />
                    <AddOption
                        handleAddOption={this.handleAddOption}
                    />
                </div>
            </div>
            <OptionModal
                selectedOption={this.state.selectedOption}
                handleClearSelectedOption={this.handleClearSelectedOption}
            />
        </div>
    );
  }
}

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.

A:

When you set your initial state in the constructor, you assign it to option not options with an s.
componentDidMount is called AFTER all of the children's componentDidMount and render methods are called. So, you're trying to look for the state object of options when you initialized with option so there is no length to look up.

