title: Setting a state variable in react-dropzone `onDrop`, after reading with exceljs
body: <p>A use case is:</p>
  <ol>
  <li>user drops a file</li>
  <li>Take a file and read with <code>exceljs</code></li>
  <li>grab values from a column and keep it inside an array <code>ids</code></li>
  <li>set a state variable <code>onDropIds</code> with the contents of <code>ids</code>.  I got steps <em><code>1</code></em>-<em><code>3</code></em> working.  I can't get <em><code>4</code></em> to work.</li>
  </ol>
  <p><strong>See:</strong> State always prints empty, even though the set contains values. See code lines 41-43.</p>
  <p><a href="https://i.stack.imgur.com/r0H96.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r0H96.png" alt="Debug screenshot" /></a></p>
  <pre><code>import React, { useState, useCallback } from &quot;react&quot;;
  import { useDropzone } from &quot;react-dropzone&quot;;
  import Excel from &quot;exceljs&quot;;
  
  export default function Test(props) {
    // Local state
    const [onDropIds, setOnDropIds] = useState(new Set());
  
    // Callback fires as soon as the file is dropped
    const onDrop = useCallback((acceptedFiles) =&gt; {
      const file = acceptedFiles[0];
      const reader = new FileReader(); // reads the file using the `FileReader` API
  
      reader.onabort = () =&gt;
        console.warn(`Reading of file ${file.path} was aborted.`);
      reader.onerror = () =&gt;
        console.error(`Reading of file ${file.path} has failed.`);
  
      reader.onloadend = (e) =&gt; {
        const bufferArray = reader.result;
  
        // temporarily hold a set of values
        const ids = new Set();
  
        const workbook = new Excel.Workbook();
        workbook.xlsx
          .load(bufferArray)
          .then((sheet) =&gt; {
            workbook.worksheets[0].eachRow({ includeEmpty: true }, (row) =&gt; {
              const colValue1 = (row.values[1] || &quot;&quot;).trim().toUpperCase();
              if (colValue1 &amp;&amp; colValue1 !== &quot;HEADERNAME&quot;) {
                ids.add(colValue1);
              }
            });
          })
          .then(() =&gt; {
            // set it to the state
            setOnDropIds(ids);
  
            // debug: print results
            console.log(onDropIds);
            console.log(&quot;---&quot;);
            console.log(ids);
          });
      };
  
      reader.readAsArrayBuffer(file);
    }, []);
  
    // Initialize the dropzone hook
    const { getRootProps, getInputProps, open, acceptedFiles } = useDropzone({
      noClick: true,
      noKeyboard: true,
      multiple: false,
      onDrop,
    });
  
    return (
      &lt;div&gt;
        &lt;div
          {...getRootProps()}
          style={
            acceptedFiles &amp;&amp; acceptedFiles.length
              ? {
                  textAlign: &quot;center&quot;,
                  border: &quot;1px solid #198562&quot;,
                  marginTop: &quot;0.5em&quot;,
                  backgroundColor: &quot;#d9fff3&quot;,
                }
              : {
                  textAlign: &quot;center&quot;,
                  border: &quot;1px dashed #000&quot;,
                  marginTop: &quot;0.5em&quot;,
                }
          }
        &gt;
          &lt;input {...getInputProps()} /&gt;
          &lt;button
            style={{ marginTop: &quot;0.5em&quot; }}
            color={acceptedFiles &amp;&amp; acceptedFiles.length ? &quot;#00ff00&quot; : &quot;#ff0000&quot;}
            onClick={open}
          &gt;
            Browse
          &lt;/button&gt;
          {acceptedFiles &amp;&amp; acceptedFiles.length ? (
            &lt;span&gt;
              {acceptedFiles[0].path}{&quot; &quot;}
              &lt;i className=&quot;fas fa-check-circle&quot; style={{ color: &quot;#75B436&quot; }}&gt;&lt;/i&gt;
            &lt;/span&gt;
          ) : (
            &quot;Drag 'n' drop a file here...&quot;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>