title: Importing xlsx and parsing to json
body: <p>I've set up a &quot;drag and drop file&quot; area on my webpage using material-ui-dropzone. Next, I installed SheetJS js-xlsx, which lets you parse xlsx data. My struggle is in getting the two to work together. I think I have the drag and drop file part working ok. But I am not sure how to deal with the next part. I have a function handleChange where I have tried various goes and I think it is just beyond my skill level.</p>
  <p>Any ideas on what to put in there to parse the data to json? Or is SheetJS not the ideal tool for the job? I see it has nearly a million downloads on npm per week, while there is read-excel-file that only has 37K downloads per week, so I went wtih the SheetJS one.</p>
  <p>Here is what I have done so far:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Typography } from &quot;@material-ui/core&quot;;
  import Paper from &quot;@material-ui/core/Paper&quot;;
  import Grid from &quot;@material-ui/core/Grid&quot;;
  import { ThemeProvider } from &quot;@material-ui/core/styles&quot;;
  import { BrowserRouter, Route, Switch } from &quot;react-router-dom&quot;;
  import Box from &quot;@material-ui/core/Box&quot;;
  import { withStyles } from &quot;@material-ui/core/styles&quot;;
  import CssBaseline from &quot;@material-ui/core/CssBaseline&quot;;
  import { CSVReader } from &quot;react-papaparse&quot;;
  import { DataGrid } from &quot;@material-ui/data-grid&quot;;
  import { DropzoneArea } from &quot;material-ui-dropzone&quot;;
  import XLSX from &quot;xlsx&quot;;
  
  const testArray = [
    { ASIN: &quot;ABC123&quot;, Rank: &quot;£50&quot;, Sales: &quot;£80&quot; },
    { ASIN: &quot;ZYX123&amp;&quot;, Rank: &quot;£70&quot;, Sales: &quot;£20&quot; }
  ];
  
  class App extends React.Component {
    state = {
      inputText: &quot;&quot;,
      outputText: &quot;&quot;,
      parsedData: [],
      myRows: [],
      myColumns: [],
      files: null
    };
    columns;
    rows;
  
    handleChange = (files) =&gt; {
      this.setState({ files: files });
      // console.log(files);
      // console.log(this.state.files);
      // const workbook = XLSX.read(files);
    };
  
    render() {
      return (
        &lt;&gt;
          {/* &lt;ThemeProvider theme={theme}&gt; */}
          &lt;Grid container justify=&quot;center&quot;&gt;
            &lt;Box mt={0} width={1100}&gt;
              &lt;Paper&gt;
                &lt;Box p={3} mt={2} mb={2}&gt;
                  &lt;Grid container spacing={0}&gt;
                    &lt;Grid item xs={6}&gt;
                      &lt;Typography variant=&quot;h6&quot; gutterBottom={false}&gt;
                        PPC Cruncher
                      &lt;/Typography&gt;
                    &lt;/Grid&gt;
                    {/* TODO: */}
                    &lt;Grid item xs={6} align=&quot;right&quot;&gt;&lt;/Grid&gt;
  
                    &lt;Grid item xs={12} align=&quot;right&quot;&gt;
                      &lt;DropzoneArea onChange={this.handleChange} /&gt;
                    &lt;/Grid&gt;
                    {/* &lt;Grid item xs={12} align=&quot;left&quot;&gt;
                        &lt;div style={{ height: 400, width: '100%' }}&gt;
                          &lt;DataGrid
                            rows={this.state.myRows}
                            columns={this.state.myColumns}
                            pageSize={5}
                            checkboxSelection
                          /&gt;
                        &lt;/div&gt;
                      &lt;/Grid&gt; */}
                  &lt;/Grid&gt;
                &lt;/Box&gt;
              &lt;/Paper&gt;
            &lt;/Box&gt;
          &lt;/Grid&gt;
  
          {/* &lt;/ThemeProvider&gt; */}
        &lt;/&gt;
      );
    }
  }
  
  export default withStyles(useStyles)(App);
  </code></pre>
  <p>Any ideas or suggestions?</p>