Read CSV file in React

Today we’ll show you how to upload and read CSV file in React. Basically, we’ll show you an example to upload or Import CSV file and read the data of the CSV file using ReactJS.

In this demo example, we will have two HTML elements such as file upload and table. The file upload will be used to select the CSV file from the system and parse data in JSON format whereas the table will be used to display the CSV data from the file.

Steps to read CSV file in React

  1. Create react application
  2. Install npm dependencies
  3. Create a page to upload CSV file and display data
  4. Add logic to read CSV file
  5. Output

1. Create react application

First of all, we have to create a startup react application using the create-react-app. Run the following command to create a react application.

2. Install npm dependencies

In the second step, we will install the required dependencies such as xlsx and react-data-table-component.

Run the following command to install the SheetJS js-xlsx npm package.

In this example, we will also use the React Datatable to display uploaded CSV records in the table view. Run the following command to install the react-data-table-component.

3. Create a page to upload CSV file and display data

Let’s create a simple page where we will add the file input element to upload the CSV file and the react datatable to display the data.

4. Add logic to read CSV file

Let’s try to add the logic to read the CSV file. Therefore we will import the xlsx npm package on top of the page. Also, we have to add two methods to convert CSV data to JSON format.

5. Output

Let’s combine all the code together and see how it looks.

App.js

Run the project and check the output in the browser. You can download the sample CSV file from here.

Output - Read CSV file in React - Clue Mediator
Output – Read CSV file in React – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

6 Responses

  1. Sayli says:

    Hi,

    Can you please show how to implement datatable with csv file instead of json file

    • Clue Mediator says:

      Hi Sayli,
      The current article will help you to read the CSV file and display the data on the screen. But as per your requirement, you have to implement file upload functionality and then try to read the data in the back-end for insertion.

      We have similar functionality in react to upload files where we are uploading the image but you can refer the following article for file upload and you have to perform the rest of the functionalities in the backend.

      Image upload in ReactJS

      Hope this will help you!

  2. Andres says:

    Try a 450k record file and it crashes

    • Clue Mediator says:

      Yes Andres, You can not manage so many records at the client-side. You have to split the sheet before doing the process or manage the whole functionality at the backend side.

  3. pedro says:

    Hi
    Great article, thanks!!
    I want implement a upload file feature as well (probably using a dropzone) and having it rendered as a list, so this will help me. I’ll handle all logic at the server-side bc i want the application to allow upload and parsing of different file types, so i think it’s best to do all this at the backend.
    I think i will need to: 1) Make http post request, sending the uploaded file from client to server 2) handle file type validation and parsing 3) Make http get request to fetch parsed data from server to client, and have it rendered there
    Would you suggest other wise?
    thanks

Leave a Reply

Your email address will not be published. Required fields are marked *