monaco.file.App.js

import { useEffect, useState } from 'react';
import Editor from '@monaco-editor/react';

const FileUploader = ({ onFileLoad }) => {
  return <input type="file" onChange={(e) => onFileLoad(e.target.files[0])} />;
};

function App() {
  const [file, setFile] = useState();
  const [value, setValue] = useState();

  useEffect(() => {
    if (file) {
      var reader = new FileReader();
      reader.onload = async (e) => {
        setValue(e.target.result);
      };
      reader.readAsText(file);
    }
  }, [file]);

  return (
    <>
      <FileUploader onFileLoad={setFile} />
      <Editor height="90vh" language="javascript" value={value} />
    </>
  );
}

export default App;