React Js Count Blank Spaces in Text File

<!DOCTYPE html>
<html>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState} = React;

function App() {
      const [spaceCount, setSpaceCount] = useState(0);

const handleFileUpload = async (event) => {
        const file = event.target.files[0];

if (file) {
          try {
            const text = await readFileAsText(file);
            const spaces = countSpaces(text);
            setSpaceCount(spaces);
          } catch (error) {
            console.error('Error reading file:', error);
          }
        }
      };

const readFileAsText = (file) => {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();

reader.onload = (event) => {
            resolve(event.target.result);
          };

reader.onerror = (event) => {
            reject(event.target.error);
          };

reader.readAsText(file);
        });
      };

const countSpaces = (text) => {
        const spaceRegex = / /g;
        const matches = text.match(spaceRegex);
        return matches ? matches.length : 0;
      };

return (
        <div className='container'>
          <h1>React Js Count Blank Spaces in a Text File</h1>
          <input type="file" onChange={handleFileUpload} />
          <div>
            <strong>Number of Blank Spaces:</strong> {spaceCount}
          </div>
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      width: 600px;
      margin: 0 auto;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
      padding: 20px
    }

strong {
      color: #333;
      font-weight: bold;
    }
  </style>
</body>

</html>