How to Export Data to CSV in React JS

In this tutorial, we’ll learn how to export data to a CSV file and how to download the CSV file when the button is clicked in our React application. We’ll be using PapaParse, a powerful CSV library for JavaScript, to accomplish this task.

In today’s web applications, allowing users to export data is a valuable feature. It allows users to work with their data in different applications, share it, or keep a local copy for reference.

How to Export Data to CSV File in React App

Before we dive into the code, it’s essential to have structured data that we want to export to a CSV file. For the purpose of this tutorial, we’ll use a simple example dataset that represents product information, including product name, price, and quantity.

// Sample data to export to CSV
const DATA = [
{ product: "Widget A", price: 10, quantity: 100 },
{ product: "Widget B", price: 15, quantity: 75 },
{ product: "Widget C", price: 20, quantity: 50 },
];

Depending on our application’s requirement, we can replace this with our own data or fetch it from an API.

Using PapaParse for CSV Conversion

To convert our data to CSV format, we’ll use a library called PapaParse. It simplifies the process of parsing and converting data to CSV format.

First, let’s install and import PapaParse into our React project.

npm install papaparse

Now, let’s import PapaParse into your React component:

import React from "react";
import Papa from "papaparse";

// Sample data to export to CSV
const DATA = [
  { product: "Widget A", price: 10, quantity: 100 },
  { product: "Widget B", price: 15, quantity: 75 },
  { product: "Widget C", price: 20, quantity: 50 },
];

const App = () => {
   //..
};

export default App;

Exporting Data and Triggering Download

import React from "react";
import "./App.css";
import Papa from "papaparse";

// Sample data to export to CSV
const DATA = [
  { product: "Widget A", price: 10, quantity: 100 },
  { product: "Widget B", price: 15, quantity: 75 },
  { product: "Widget C", price: 20, quantity: 50 },
];

const App = () => {

  // Function to export data to CSV and trigger download
  const exportDataToCSV = () => {
    // Convert the data to CSV format using PapaParse
    const csv = Papa.unparse(DATA);

    // Create a Blob containing the CSV data
    const csvBlob = new Blob([csv], { type: "text/csv" });

    // Create a URL for the Blob
    const csvUrl = URL.createObjectURL(csvBlob);

    // Create an invisible link element to trigger the download
    const link = document.createElement("a");
    link.href = csvUrl;
    link.download = "product_data.csv";

    link.click();

    // Clean up by revoking the URL to release resources
    URL.revokeObjectURL(csvUrl);
  };

  return (
    <div>
      {/* Add Button Here */}
    </div>
  );
};

export default App;

In this function, we first use PapaParse to convert the data array into a CSV string. We then create a Blob containing the CSV data and generate a URL for it.

This URL is assigned to an invisible link element (<a>), which is automatically clicked to trigger the download when the user clicks the export button. After the download, we clean up by revoking the URL to release system resources.

Implement the Download Button

Now, we’ll add a button to your React component that triggers the download.

import React from "react";
import "./App.css";
import Papa from "papaparse";

// Sample data to export to CSV
const DATA = [
  { product: "Widget A", price: 10, quantity: 100 },
  { product: "Widget B", price: 15, quantity: 75 },
  { product: "Widget C", price: 20, quantity: 50 },
];

const App = () => {

  // Function to export data to CSV and trigger download
  const exportDataToCSV = () => {
    // Convert the data to CSV format using PapaParse
    const csv = Papa.unparse(DATA);

    // Create a Blob containing the CSV data
    const csvBlob = new Blob([csv], { type: "text/csv" });

    // Create a URL for the Blob
    const csvUrl = URL.createObjectURL(csvBlob);

    // Create an invisible link element to trigger the download
    const link = document.createElement("a");
    link.href = csvUrl;
    link.download = "product_data.csv";

    link.click();

    // Clean up by revoking the URL to release resources
    URL.revokeObjectURL(csvUrl);
  };

  return (
    <div className="container">
      <button onClick={() => exportDataToCSV()}>Export to CSV</button>
    </div>
  );
};

export default App;

With this button in place, users can easily export the data to a CSV file.

Conclusion

That’s it, In this tutorial, we’ve covered how to add a CSV export feature to your React application. This functionality is not only user-friendly but can also be a significant asset to your project. Users can export data for analysis, reporting, or simply to keep records. I hope it was helpful.