Call says cannot read property 'then of undefined (looks valid )

Question

I don't know if it is React.JS , or just me forgetting something with promises but I'm getting this error

const promise = SAIIndexedDB(response.data)
promise.then(function(result){
    this.setState({
         loadingMedications: false                    
    });  
})
.catch(function(error){
    console.log('error', error);
});

Error:

TypeError: Cannot read property 'then' of undefined

line number shows it is this line promise.then(function(result){

I was reading through this and it seems correct... https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Reason I want/need a promise is that loadingMedications gets set to false which closes the spinner when the data is done loading from the function call SAIIndexedDB(..)

Here is the function that is calls

export function SAIIndexedDB(customerData){
    var status = "start in helpers";
    const dbName = "SAIOffline";
    var request = indexedDB.open(dbName, 2);
    request.onerror = function(event) {
    };

    request.onupgradeneeded = function(event) {
        var db = event.target.result;
        var objectStore = db.createObjectStore("medications", { keyPath: "value"});
        objectStore.createIndex("short_description", "short_description", { unique: false });
        //objectStore.createIndex("email", "email", { unique: true });
        objectStore.transaction.oncomplete = function(event) {
            // Store values in the newly created objectStore.
            var customerObjectStore = db.transaction("medications", "readwrite").objectStore("medications");
            customerData.forEach(function(customer) {
              customerObjectStore.add(customer);
            });
            status = "done"
            return status;
        };

    };

}

Answer 1

Please update your code like the followings:

SAIIndexedDB(response.data).then(function(result){
    this.setState({
         loadingMedications: false                    
    });  
})
.catch(function(error){
    console.log('error', error);
});

export function SAIIndexedDB(customerData){
    return new Promise((resolve, reject) => {
    var status = "start in helpers";
    const dbName = "SAIOffline";
    var request = indexedDB.open(dbName, 2);
    request.onerror = function(event) {
           reject(event)
    };

    request.onupgradeneeded = function(event) {
        var db = event.target.result;
        var objectStore = db.createObjectStore("medications", { keyPath: "value"});
        objectStore.createIndex("short_description", "short_description", { unique: false });
        //objectStore.createIndex("email", "email", { unique: true });
        objectStore.transaction.oncomplete = function(event) {
            // Store values in the newly created objectStore.
            var customerObjectStore = db.transaction("medications", "readwrite").objectStore("medications");
            customerData.forEach(function(customer) {
              customerObjectStore.add(customer);
            });
            status = "done"
            resolve(status);
        };

    };
}

}