Uncaught TypeError: Cannot read property 'SelectedOption' of null

Question

I am using react-select to allow user to multiple select from a list of FEATURE given. My Typescript code which looks like this

`

import React from "react";
import { Select } from "react-select";
import { FEATURE } from "routes/models/constants";
interface FeatureSelectProps {
    SelectedOption ?: string;
}
export default class FeatureSelect extends React.Component<FeatureSelectProps, any> {
    handlechange(SelectedOption: any)
    {
        this.setState({SelectedOption});
        if(SelectedOption) 
        {
            console.log(`Selected: ${SelectedOption.label}`);
        }
    }
    render() {
        const { SelectedOption = ' ' } = this.state;  
        return (
            <Select multi={true}
                    name="Features"
                    placeholder="+ Add Feature" 
                    options={FEATURE}
                    value={SelectedOption}
                    onChange={this.handlechange} />
        );
    }
}

`

shows this error on loading the page: Uncaught TypeError: Cannot read property 'SelectedOption' of null

What is the reason of the same and how to resolve this ?

Answer 1

The above problem was solved with the following edit: `

export default class FeatureSelect extends React.Component<any, any> {
    state = {
        selectedOption: ""
    };
    handleChange = (selectedOption: any) => {
        this.setState({ selectedOption });
        if (selectedOption) {
            console.log(`Selected: ${selectedOption.label}`);
        }
    };
    render() {
        const { selectedOption } = this.state;
        return (
            <Select
                placeholder="Select Feature(s)"
                multi={true}
                value={selectedOption}
                onChange={this.handleChange}
                options={FEATURE}
            />
        );
    }
}

`