CODEWITHSUNDEEP
javascriptreactjsreact-select
Sebs030
Sebs030

Reputation: 616

TypeError: Cannot read property of null in React Component

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.

Upvotes: 1

Views: 22812

Answers (2)

Chris
Chris

Reputation: 59491

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.

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281646

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>

Upvotes: 4

Related Questions