React + Electron + Typescript - Pass defaultValue prop to JSX Input Element using data fetched asynchronously (Promise)

60
July 28, 2021, at 01:40 AM

I have what is meant to be a settings menu component, and I am attempting to read from a JSON file located in the app data directory. For this persistent data storage, I'm using electron-store@^8.0.0. I have a bridge.ts file and I am using contextBridge to expose methods to the renderers. The method to fetch data is as follows:

bridge.ts

export const api = {
  . . .
  getSetting: async (setting: string) => {
    ipcRenderer.send('get-setting', setting)
    let response
    async function awaitResponse() {
      return new Promise((resolve, reject) => {
        ipcRenderer.once('get-setting-reply', (event, data) => {
          resolve(data)
        })
      })
    }
    response = await awaitResponse()
    return response
  },
  . . .
}

And the implementation in main.ts:

main.ts

async function registerListeners () {
  . . .
  ipcMain.on('get-setting', (event, args) => {
    event.reply( 'get-setting-reply', storage.get(args.setting) )
  })
  . . .
}

Now, back to the settings component. With the data that I have fetched, I attempt to set the defaultValue prop of the <input> element, but to no avail. Typescript tells me that:

Type 'Promise<unknown>' is not assignable to type 'string | number | readonly string[] | undefined'.

Settings/index.tsx

            <Setting>
                <label>Username</label>
                <input
                    type="text"
                    name="username"
                    spellCheck="false"
                    onChange={ (e) => window.Main.setSetting("username", e.target.value) }
                    defaultValue={ window.Main.getSetting('username') }
                />
            </Setting>

Full error:

Type 'Promise<unknown>' is not assignable to type 'string | number | readonly string[] | undefined'.
 
Type 'Promise<unknown>' is missing the following properties from type 'readonly string[]': length, concat, join, slice, and 16 more.ts(2322)
index.d.ts(1818, 9): The expected type comes from property 'defaultValue' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'

I'm not aware of a way to extract the value from a promise, even after 8 hours of searching. With the .then approach, for example, a new promise is returned!

Finally, for some reason, it still seems to display it inside the <input> without throwing an error. No clue why this happens.

Is there maybe another way, that does not return a promise object?

Thank you! <3

READ ALSO
Can i deduct that either thumb pressed or finger pressed in android screen programmatically?

Can i deduct that either thumb pressed or finger pressed in android screen programmatically?

i started working as android developerI want to gesture that when someone press on screen, its thumb or finger

84
Sequelize transaction - save transaction to commit in the next request

Sequelize transaction - save transaction to commit in the next request

I'm working with a feature to bulk upload more than 1000 users to DB Many insertions have to be done in different tables for each user

141
CSS Custom property Url isn&#39;t working in Asp .Net

CSS Custom property Url isn't working in Asp .Net

I'm trying to style some cards in an mvc project and i have a custom property(variable) in my css "--bg-img" file as shown :

88