React can not convert undefined or null to object

Question

I am using react-select and I have two multi select dropdown elements. I have declared my state as following:

constructor(props){

    super(props);

    this.state = {
    createNewDeliveryData: {
            languages: [],
            markets:[],

        },

    };

} 

I have two functions that add languages/markets selected from my multi select dropdown:

addLanguage = (val) => {
    // Get a copy of the languages state.
    const languages = [...this.state.createNewDeliveryData.languages];
    for(let i=0; i< val.length; i++){
        if(languages.indexOf(val[i].id) === -1) { // notice that there is a parenthesis after `id`.
            languages.push(val[i].id)
        }
    }
    this.setState(
        {
            createNewDeliveryData: {languages}
        }, function () {
            this.setValue({id:"languages", value:this.state.createNewDeliveryData.languages, error:null})
        });
}

addMarket = (value) => {

    console.log(value)
    // Get a copy of the markets state.
    const markets = [...this.state.createNewDeliveryData.markets];
    for(let i=0; i< value.length; i++){
        if(markets.indexOf(value[i].id) === -1) { // notice that there is a parenthesis after `id`.
            markets.push(value[i].id)
        }
    }
    this.setState(
        {
            createNewDeliveryData: {markets}
        }, function () {
            this.setValue({id:"markets", value:this.state.createNewDeliveryData.markets, error:null})
        });
}

My select boxes:

{/* Language */}
<Row>
    <Col xs={3} sm={3} md={2} lg={2}>
        <div className="test-one">
            <FormattedMessage id="language" defaultMessage="Sprache der Lieferung" />
        </div>
    </Col>
    <Col xs={6} sm={6} md={6} lg={6}>

        <Select
            multi={true}
            name="form-field-name"
            options={this.props.metadata ? this.props.metadata["latest"].languages : []}
            labelKey="display_name"
            valueKey="id"
            onChange={this.addLanguage}
            clearable={false}
            value={this.state.createNewDeliveryData.languages}
        />
    </Col>
</Row><br/>

{/* Target market */}
<Row>
    <Col xs={3} sm={3} md={2} lg={2}>
        <div className="test-one">
            <FormattedMessage id="market" defaultMessage="Zielmarkt" />
        </div>
    </Col>
    <Col xs={6} sm={6} md={6} lg={6}>
        <Select
            multi={true}
            name="form-field-name"
            options={this.props.metadata ? this.props.metadata["latest"].countries : []}
            labelKey="display_name"
            valueKey="id"
            onChange={this.addMarket}
            clearable={false}
            value={this.state.createNewDeliveryData.markets}
        />
    </Col>
</Row><br/>

I populate my dropdown by making a call to backend. Now the problem is I can select from either of the boxes, when I choose a value from other box it throws me error saying: can not convert undefined or null to object.

Why does it happen? What am I doing wrong?

Answer 1

Issue is in the way you are updating the state value.

Initially the createNewDeliveryData contains two keys:

createNewDeliveryData = {
   languages: [],
   markers: []
}

But when you are updating the state you are removing the second one:

this.setState({
    createNewDeliveryData: {languages}
    ...
})

Meaning of this is:

createNewDeliveryData: {languages: languages}

Now createNewDeliveryData will have only one key language not the other one.

To solve the issue update the state like this:

this.setState({
        createNewDeliveryData: {...this.state.createNewDeliveryData , languages:languages }
    }, function () {
          this.setValue({id:"languages", value:this.state.createNewDeliveryData.languages, error:null})
    });
}

Check this snippet:

//problem

let obj1 = {a:1, b:2};
console.log('initially obj1 = ', obj1);
let b = 4;
obj1 = {b};

console.log('after obj1 = ', obj1);

//solution

let obj2 = {a:1, b:2};
console.log('initially obj2 = ', obj2);
b = 4;
obj2 = {...obj2, b};

console.log('after obj2 = ', obj2);