I have a React-Select Component which renders a drop-down Menu and when an item from the dropDown is selected a button get´s rendered.

import React, { Component } from 'react';
import Select from 'react-select';
class selectDemo extends Component {
state = { 
    selectedOption: '',
    data: [
        {Model: 'Option1'},
        {Model: 'Option2'},
    ],
 }

//Handler for Select Drop Down
handleChange = (selectedOption) => {
    this.setState({selectedOption}, ()=>console.log(this.state.selectedOption.Model));
}

RenderButton = () => {           
        return <button type="button" className="btn btn-primary">{this.state.selectedOption.Model}</button>
}

render() {
    console.log(this.state.selectedOption);
    const { selectedOption } = this.state;
    const value = selectedOption && selectedOption.Model;
    return (
        <div>
            <div name="selectedOption" className="section">
                <Select
                    className='form-control'
                    placeholder='Select Option'
                    name="selectedOption"
                    value={value}
                    onChange={this.handleChange}
                    labelKey='Model'
                    valueKey='Model'
                    optionClassName='dropdown-item'
                    options={this.state.data}
                />
            </div>
            <div className="section">
               {this.state.selectedOption.Model && <this.RenderButton/>}
            </div>
        </div>
    );
}
}
export default selectDemo;

However if I clear the value ,i.e. not choosing another one but clicking the x to remove my selection I get an

TypeError: Cannot read property 'Model' of null

Error at exactly Line 54 where I am actually checking wether the value is 'null' or 'undefined'. I tried with typeof , if and switch statemements after reading:

• Is there a standard function to check for null, undefined, or blank variables in JavaScript?
• JavaScript checking for null vs. undefined and difference between == and ===

but this doesn´t work as well.

I have a React-Select Component which renders a drop-down Menu and when an item from the dropDown is selected a button get´s rendered.

import React, { Component } from 'react';
import Select from 'react-select';
class selectDemo extends Component {
state = { 
    selectedOption: '',
    data: [
        {Model: 'Option1'},
        {Model: 'Option2'},
    ],
 }

//Handler for Select Drop Down
handleChange = (selectedOption) => {
    this.setState({selectedOption}, ()=>console.log(this.state.selectedOption.Model));
}

RenderButton = () => {           
        return <button type="button" className="btn btn-primary">{this.state.selectedOption.Model}</button>
}

render() {
    console.log(this.state.selectedOption);
    const { selectedOption } = this.state;
    const value = selectedOption && selectedOption.Model;
    return (
        <div>
            <div name="selectedOption" className="section">
                <Select
                    className='form-control'
                    placeholder='Select Option'
                    name="selectedOption"
                    value={value}
                    onChange={this.handleChange}
                    labelKey='Model'
                    valueKey='Model'
                    optionClassName='dropdown-item'
                    options={this.state.data}
                />
            </div>
            <div className="section">
               {this.state.selectedOption.Model && <this.RenderButton/>}
            </div>
        </div>
    );
}
}
export default selectDemo;

However if I clear the value ,i.e. not choosing another one but clicking the x to remove my selection I get an

TypeError: Cannot read property 'Model' of null

Error at exactly Line 54 where I am actually checking wether the value is 'null' or 'undefined'. I tried with typeof , if and switch statemements after reading:

• Is there a standard function to check for null, undefined, or blank variables in JavaScript?
• JavaScript checking for null vs. undefined and difference between == and ===

but this doesn´t work as well.

• javascript
• reactjs
• react-select

• Where exactly is the error throwing? There is no Line 54 in your code. – Simon Commented Jul 26, 2018 at 8:13
• Sorry, yes I simplified the code t post it here and in my original ponent it was line 54, now it´s actually here {this.state.selectedOption.Model && <this.RenderButton/>} – Sebs030 Commented Jul 26, 2018 at 8:34

2 Answers 2

What you need to do is to provide a check before accessing Model since when you deselect an option, selectedOption bees null and you cannot access a property from it.

 <div className="section">
       {this.state.selectedOption && this.state.selectedOption.Model && <this.RenderButton/>}
 </div>

The error seems to originate from your line:

{this.state.selectedOption.Model && <this.RenderButton/>}

This will work if selectedOption has a truthy value. However if has the value of null, it doesn't make sense to read Model from it. As such, you need to first check if selectedOption is truthy before checking Model.

You are already doing so at the top of the render() method:

const value = selectedOption && selectedOption.Model;

So you could do:

{value && <this.RenderButton/>}

Alternatively, here is a neat way to solve this issue, especially if the property is many levels deep:

(selectedOption || {}).Modal && <this.RenderButton/>

This means that if selectedOption is falsy you can create a temporary object {} so that you can try to read Modal from it without getting an error.