title: Displaying local CSV data in a table in React
body: <p>I'm new to react and only have an entry level understanding of coding but need to use it for a project.</p>
  <p>I'm trying to display data from a local csv file in a simple HTML table that can then be searched by a user on the page. So far I've only been able to find tutorials that require users to upload their own CSV first but I just need to have the data on the screen.</p>
  <p>I appreciate that this is probably a really simple question but its all new to me and I just can't seem to find a solution that works.</p>
  <p>This code is from one of the tutorials I've followed and returns the result I need but only when the user uploads the csv first.</p>
  <pre><code>    import React, {useState, useCallback} from 'react'
  import {useDropzone} from 'react-dropzone'
  import Papa from 'papaparse';
  import './App.css';
  
  
   export default function MyDropzone () {
    const onDrop = useCallback(acceptedFiles =&gt; {
      if (acceptedFiles.length) {
    parseFile(acceptedFiles[0]);
  }
    }, []);
  
    const {getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject} = useDropzone({onDrop, accept: 'text/csv'})
  
    const [parsedCsvData, setParsedCsvData] = useState([]);
  
    const parseFile = file =&gt; {
  Papa.parse(file, {
      header: true,
      complete: results =&gt; {
        setParsedCsvData(results.data)
      },
    });
  };
  
  return (
    &lt;div className=&quot;Archive&quot;&gt;
      &lt;div
        {...getRootProps({
          className: `dropzone
          ${isDragAccept &amp;&amp; 'dropzoneAccept'}
          ${isDragReject &amp;&amp; 'dropzoneReject'}`,
        })}
      &gt;
        &lt;input {...getInputProps()} /&gt;
        {isDragActive ? (
          &lt;p&gt;Drop the files here ...&lt;/p&gt;
        ) : (
          &lt;p&gt;Drag 'n' drop some files here, or click to select files&lt;/p&gt;
        )}
      &lt;/div&gt;
      &lt;table className=&quot;ArchiveTable&quot;&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Kanji&lt;/th&gt;
            &lt;th&gt;Reading&lt;/th&gt;
            &lt;th&gt;English&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          {parsedCsvData &amp;&amp;
            parsedCsvData.map((parsedData, index) =&gt; (
              &lt;tr key={index}&gt;
                &lt;td&gt;{parsedData.Name}&lt;/td&gt;
                &lt;td&gt;{parsedData.Address}&lt;/td&gt;
                &lt;td&gt;{parsedData.Postcode}&lt;/td&gt;
                &lt;td&gt;{parsedData.Issue}&lt;/td&gt;
                &lt;td&gt;{parsedData.Date}&lt;/td&gt;
                &lt;td&gt;{parsedData.Score}&lt;/td&gt;
              &lt;/tr&gt;
            ))}
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  );
  }
  </code></pre>