TypeError: Cannot read property of null in React Component

Question

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:

but this doesn´t work as well.

Where exactly is the error throwing? There is no Line 54 in your code. — Simon, Jul 26 '18 at 08:13
Sorry, yes I simplified the code t post it here and in my original component it was line 54, now it´s actually here `{this.state.selectedOption.Model && }` — Sebs030, Jul 26 '18 at 08:34

score 4 · Accepted Answer · answered Jul 26 '18 at 08:08

4

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

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

answered Jul 26 '18 at 08:08

Shubham Khatri

270,417
55
406
400

Yes thanks that was the issue, I was only looking at ´this.state.selectedOption.Model´ since this was throwing the error – Sebs030 Jul 26 '18 at 08:37

score 0 · Answer 2 · answered Jul 26 '18 at 08:11

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.

Thanks a lot , this answer ist correct as well and a nice alternativ to solve the issue — Sebs030, Jul 26 '18 at 08:38

TypeError: Cannot read property of null in React Component

2 Answers2