How To Read CSV File In React.js

Hello Friends, Today we will learn about how to read CSV file in React.js

Prerequisites: You have created  react app

Step 1:  Install the papaparse package to parse the CSV file

npm install papaparse

Step 2: In your Component add the following Code to read the CSV file.

import React from 'react'
import { useState } from 'react';
import Papa from "papaparse";

const HomeComponents = () => {
    const [data, setdata] = useState([])
      const readfile =(event) =>{
        Papa.parse([0], {
            header: true,
            skipEmptyLines: true,
            complete: function (results) {

    return (
        <div style={{ marginTop: '30px' }}>
            <input type='file' onChange={readfile} accept='.csv' />

            <table style={{ margin: '20px auto' }}>
                    <th>Employee Code</th>
                    <th>Contact No.</th>
           => {
                        return <tr>

export default HomeComponents

– Add the below CSS to your App.css to style the table

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
th, td {
  background-color: #96D4D4;
  padding: 5px;

– Here is a Video for reference.

  • Sample CSV file :

– Hope you learn about how to read CSV file data in React.js

-If you have any doubt feel free to ask in the comment section.

Submit a Comment

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


Select Categories