CODEWITHSUNDEEP
javascriptreactjsreact-select
Knows Not Much
Knows Not Much

Reputation: 31526

React-Select Uncaught TypeError: Cannot read property 'value' of undefined

I am using React-Select to show a list of items. this list is taken by making a call to the web service.

when I click on the React-Select to drop down the list. it throws and error

Uncaught TypeError: Cannot read property 'value' of undefined (Select.js line 74)

If I click a few times ... then I can see that it calls my web service method and the code starts working correctly.

So it seems that for the first few seconds react-select would throw an error if someone clicked on it. but after some time it starts to call my web service method and get results from it and shows it correctly.

My code is pretty simple

    <Select multi simpleValue
        name="foo"
        value={selectedItem}
        clearable={false}
        options={allItems}
        onChange={updateItem}
        optionRenderer={renderItem}
        valueRenderer={renderLabel}
    />

I have debug statements inside my method updateItem

export function updateItem({field, params}) {
    console.log('going to make webservice request');
    return dispatch => {
        callWebService(params).then(response => {
            console.log('got response');
            const key = Object.keys(response[0])[0];
            const options = response.map(item => ({
                label: item[key], value: item[key]
            }));
            dispatch(populateChannels(options));
        });
    };
}

when the page loads I can see that it prints 'going to make webservice request' but when I click on the react-select it throws the error.

Upon clicking the drop drop 5/6 times eventually I see the message "got response" and then the error message goes away and the drop down works normally.

So it seems that before the web service returns the values, the drop down box would throw an error if someone clicked on it.

how do I stop the error?

Upvotes: 2

Views: 5649

Answers (2)

Leo Yu
Leo Yu

Reputation: 2867

if you don't need searchable, you can set Select component with searchable={false}

If you read the source code of the react-select.es.js

before it reaching the undefined this.input bug, there are couple places able to return. Therefore, I tried set searchable to false, and it avoid this bug happen.

Upvotes: 0

Moewiz
Moewiz

Reputation: 111

options should be provided as an Array of Objects, each with a value and label property. Example:

const options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

Upvotes: 1

Related Questions