Unable to display the IndexedDB Object store data in react js

I am very very beginner for react js. I have stored all the data into the indexeddb. but i not able to read the data. inside the open cursor i can read all the data and push to array. but not able to set the state for array and due to this not able to display in react render.

Kindly please help for solve the issue.

if i execute the below code i am getting this error : TypeError: this.setstate is not a function.

Please post your answer with the code. thanks.

Please see my code samples below.

import React, { Component} from 'react';

var ProductsStore = null;
var dbname = "TEST";
var dbversion=2;
var DataIndexedDB=[];

class Test extends Component {
constructor(props){
super(props)

    this.state={
        ProductDetails:[]
    }

}
 componentDidMount = () => {
        try {

            var IProductsDB=null;
            var ProductsDB =  window.indexedDB.open(dbname, dbversion);
            if (ProductsDB) {
                ProductsDB.onsuccess = function (event) {
                    IProductsDB = event.target.result;
                    if (IProductsDB) {
                        try {
                            if(IProductsDB.objectStoreNames.length>0)
                            {
                                if(IProductsDB.objectStoreNames.contains('Products'))
                                {
                                    var transaction = IProductsDB.transaction(["Products"], "readwrite");
                                    ProductsStore = transaction.objectStore("Products");
                                    if (ProductsStore) {
                                        var request = ProductsStore.openCursor();
                                        request.onsuccess = function (evt) {
                                            var cursor = evt.target.result;
                                            if (cursor) {
                                                DataIndexedDB.push(new Array(cursor.value));

                                                cursor.continue();
                                            }
                                            else {
                                            }
                                            this.setState({ProductDetails:DataIndexedDB});
                                        }

                                    }

                                }
                            }
                        }
                    catch (error) {
                            alert(error);
                        }
                    }
                }
            }
        }
        catch (error) {
            alert(error);
        }
    }

    render() {
        return (
            <table>
                   {this.state.ProductDetails.map((item =>
                   <tr><td key={item.id}>{item.id}</td><td>{item.sku}</td></tr>
            ))}



            </table>
        );
    }
}
export default Test;