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...

Leave a Reply

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