CODEWITHSUNDEEP
reactjsreact-select
Bomber
Bomber

Reputation: 10947

react select async option,

I am trying to use this component with the async options using es5. I have a service call in my componentDidmount which sets the schools array using a callback:

componentDidMount: function(){

    SchoolsDataService.getSchools(
        this.setSchoolsState
    );

Which sets the schools list to the state array

setSchoolsState: function(data){

    this.setState({schools: data.schools})

},

Service:

getSchools: function (callback) {

    var url = 'xxxx';

    request
        .get(url)
        .set('Accept', 'application/json')
        .end(function (err, res) {
            if (res.ok) {
                var data = res.body;
                if (data) {
                    callback(data);
                }
            }
        });
}

How can I set this up using the example in the docs? Where would I put the service call for the async version like this and generate the options list?

var getOptions = function(input, callback) {
setTimeout(function() {
    callback(null, {
        options: [
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' }
        ],
        // CAREFUL! Only set this to true when there are no more options,
        // or more specific queries will not be sent to the server.
        complete: true
    });
}, 500);
};

MY component is rendered using:

  <Select.Async
         name="form-field-name"
         value="one"
         loadOptions={getOptions}/>

I get this error:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of TableModalComponent.

I have it at the top of my page:

Select = require('react-select'),

Upvotes: 1

Views: 11655

Answers (1)

pierrepinard_2
pierrepinard_2

Reputation: 1426

I think you have 2 different options here:

Either you stay with your service call in componentDidMount which updates local state, and then you DON'T need async-options because you can directly pass options={this.state.schools} to the select-component,

Or you don't need local state (and no componentDidMount service call either) because you do the service call directly in your getOptions function (for an async-options select-component):

var getOptions = function(input, callback) {
    setTimeout(function() {
        SchoolsDataService.getSchools(function(data) {
            callback(null, {
                options: data.schools,
                complete: true,
            });
        });
    }, 500);
};

Upvotes: 5

Related Questions