Sometimes you want to fetch data from say a dropdown with react from an REST API with some Mongo Data, or via AJAX or to a web service.  All looks fine in the console, you can see it coming through but after you’ve selected the drop down there is no data, what’s going on?

This is a fairly normal thing to happen for users new to react, until you understand the javascript is asynchronous by nature.
Some people use lot’s of call backs, .fetch, different promise NPM extensions of choice.
ES7 rolled in and below is the last time I used promises to fetch data, in a clean way without to many .then statements and endless call back christmas trees.
From the event handler onChange of a component, it  calls one function.

setSuburbsDropdown(search, category, state) {
var suburbSelectOptionsArray = [];
var suburbSelectOptionsMap;

const callWithPromise = (search, category, state) => {
return new Promise((resolve, reject) => {
Meteor.apply(‘getTrainersSuburbOptions’, [null, category, state], true, function (error, result) {
if (error) reject(‘Could not retreive Suburbs’);
resolve(result);
});
});
}

async function getSuburbSelectOptions() {
const suburbSelectionOptions = await callWithPromise(search, category, state);
return suburbSelectionOptions;
}

getSuburbSelectOptions().then((result) => {
suburbSelectOptionsMap = result;
suburbSelectOptionsMap.map(
({ suburb }) =>
(
suburbSelectOptionsArray.push({ value: suburb, label: suburb })
)
);
this.setState({ suburbSelectValues: suburbSelectOptionsArray });
});
}