Simple XML Parsing with React.jsx

import React, { useEffect, useState } from 'react';

function Counter(props) {
  const [file, setFile] = useState(null);
  const [xml, setXml] = useState(null);

  // Loads the provided file and parses the XML content.
  useEffect(() => {
    if (file !== null) {
      
      console.log(file);
      // Create new file reader to read the FileList file we received
      // from the event.target.files property of the <input type="file" />
      // element
      let fileReader = new FileReader();
      // This will read in the XML as a text string which we will then
      // parse into a Document object.
      fileReader.readAsText(file, 'text/xml');
      // Callback function for when the file has been loaded.
      fileReader.onload = event => {
        // This is where the parsing from the text string to a JavaScript
        // Document object occurs. We can use this to perform all of our
        // DOM manipulation.
        let parser = new DOMParser();
        setXml(parser.parseFromString(event.target.result, 'text/xml'));
      };
    }
  }, [file]);

  // Loads once the XML code has been parsed from the user's file.
  useEffect(() => {
    if (xml !== null) {
      // We can perform all of our DOM manipulation here.
      console.log(xml);
      console.log(xml.querySelector('book').removeChild(xml.querySelector('book').childNodes[1]));
      xml.querySelector('book').querySelector('author').innerHTML = 'Jacob Gates';
      console.log(xml.querySelector('book').querySelector('author'));
    }
  }, [xml])

  // This function will download the new XML file on the client side. This is a
  // neat little hack, but certainly not ideal.
  function download() {
    if (xml !== null) {
      // IMPORTANT! We must serialize the JavaScript Document object back into
      // a string so that it can be written to a file. We do this with the following
      // line:
      const serializer = new XMLSerializer();
      // Create the file blob and then generate a local URL for it to download from.
      const blob = new Blob([serializer.serializeToString(xml)], { type: 'text/xml' });
      const url = window.URL.createObjectURL(blob);
      // We now create an invisible anchor element that we will programatically click
      // to download the file when the use presses the 'Download' button.
      const a = document.createElement('a');
      a.setAttribute('hidden', '');
      a.setAttribute('href', url);
      a.setAttribute('download', 'new-xml-file.xml');
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    } else {
      console.log('Cannot download when no xml file is loaded!');
    }
  }

  return (
    <div>
      <form onSubmit={e => e.preventDefault()}>
        <input type="file" onChange={e => setFile(e.target.files[0])}></input>
      </form>
      <button onClick={download}>Download</button>
    </div>
  )
}

export default Counter;