I'm trying to pass two properties of an object to store within the Indexed DB instance. The transaction is undefined when attempting to "add()" or "put()".
The following is the initial database connection function
const indexedDbInit = () => {
const traitDatabase = window.indexedDB.open("Trait Pairs", 3);
traitDatabase.onupgradeneeded = (e) => {
temp = e.target.result
traitsStore = temp.createObjectStore("Traits", { autoIncrement: true});
}
traitDatabase.onsuccess = (event) => {
console.log ("The database was established");
}
}
The function attempting to add the trait
const traitDispatch = async(temp, type,value) => {
const promise = new Promise((resolve, reject) => {
let result
const tx = temp.transaction(["Traits", "readwrite"])
tx.oncomplete = _ => resolve(result)
tx.onerror = event => reject(event.target.error)
const sStore = tx.objectStore("Traits");
const request = sStore.put({traitType: type, traitName: value })
request.onsuccess = _ => result = request.result;
})
let result
try {
result = await promise
}
catch(error){
console.log(`${error}`)
}
console.debug(result)
}
A segment of the returned markup
{placeholder.attributes.map((attribute) =>{
return(
attribute.map((attri) => {
var type = attri.trait_type;
var value = attri.value;
return(
<Grid item xs={3}>
<button className="imgScl"style={{padding:"0.5em",whiteSpace:"nowrap",borderRadius: 8,textDecoration:"none", backgroundColor:"#BD4F6C", border: "none"}} onClick={() => {
traitDispatch(temp,type, value)
}}
value={attri.value} trait={attri.trait_type}>{attri.trait_type + ": " + attri.value + " [" + attri.rarity + "]"} </button>
</Grid>
)
})
)
