How to use react-select when data is coming from server

Question

I am confused as to how to make react-select contain the values that are being returned from the server via ajax:

popup.js

import React from 'react';
import ReactDOM from 'react-dom';

import SourcesSelector from './sources-selector';

class Popup extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            sources: []
        };
    }

    componentDidMount() {
        fetch("http://theserver/getdata.php")
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        sources: result.sources
                    });

                },
                (error) => {
                }
            )
    }

    render() {
        return (
            <div>
                <SourcesSelector sources={this.state.sources}/>
            </div>
        );
    }
}

ReactDOM.render(<Popup/>, document.getElementById('app'));

sources-selector.js

import React from 'react';
import Select from 'react-select';

export default class SourcesSelector extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            sources: props.values,
            selectedValues: []
        }

    }
    render() {

        return (
            <Select options={this.state.sources} />
        );
    }
}

Answer 1

You can use 'map' function.

For example :

import React from 'react';
import Select from 'react-select';

export default class SourcesSelector extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            sources: props.values,
            selectedValues: []
        }

    }
    render() {
       var sourcesOptions = '';
       if(this.state.sources.lenght>0){
          sourcesOptions = this.state.sources.map(function(option, index) {
             return(<option value={option.value}>{option.label}</option>);
          });
        }
        return (
            <Select>
              {sourcesOptions}
            </Select>
        );
    }
}