Can't display Pyodide output to textarea element

Question

I'm having trouble displaying a pyodide Python output to a textarea element called 'output'. I'm using react/next.js and when the page loads I want to see the python output in the textarea box but it only displays the following:

>>> 
[object Promise]

The code runs fine in the console. I just can't seem to display in the textarea. If there is a better way to append it to a textarea, I'm happy to see any new suggestions.

This is the code I'm working with:

export default function Home() {
  function addToOutput(stdout) {
    output.value += ">>> " + "\n" + stdout + "\n";
  }

  async function main() {
    const pyodide = await loadPyodide({
        indexURL: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/"
    });

    let stdout = pyodide.runPythonAsync(`
        print("Hello World")  
    `);

    addToOutput(stdout);
  }

  main();

  return (
    <textarea readonly className="code-output" id="output" name="output"></textarea>
  )
}

Thanks for any help!

Answer 1

The message [object Promise] means that the result is a promise instead of a string. You must resolve the promise (await) to get the desired result.

In your example runPythonAsnc() has returned a promise and later executes the Python code. Your code is trying to display the result that has not yet happened.

Note: you are calling the result stdout. RunPythonAsync() returns The result of the Python code translated to JavaScript..