In many web applications, exporting data is a must-have feature for users who need to download and analyze data offline. In this article, we’ll learn how to fetch data from an API using Axios and export it as a CSV file using the react-CSV library.
This article is perfect for React developers looking to integrate CSV download functionality in their apps.
Prerequisites
To follow along, make sure you have,
- Basic knowledge of React
- Node.js and npm installed
- A React project set up
Step 1. Set Up Your React App.
If you haven’t already created a React project, you can do so using the following steps.
In my previous article, I provided a step-by-step guide to setting up a React.js application with Material-UI. Please read it's beneficial for beginners: “How To Integrate Material UI With React.js"
I'll explain this again shortly. These steps.
The command npx create-react-app react-csv-export is used to create a new React application react-csv-export using the Create React App tool. It creates a ready-to-use React project with all the necessary files and configurations. After the project is created, cd react-csv-export changes the current directory to the new project folder so you can start working inside it. Finally, npm start launches the development server and opens the app in your default browser, allowing you to see your React application running locally.
![Create React App]()
Image 1. The react-csv-export project is created
Install the Material UI
Go to the Material-UI website and get some instructions. There are some types of versions(V4, V5, V6, and V7) in Material-UI.
![Material UI]()
Image 2. Types of versions(V4, V5, V6, and V7) in Material-UI.
Now I'm going to install the Mui and Style.
Google Web Fonts
To install Roboto via the Google Web Fonts CDN, insert the following code inside the <head> tag of your project.
- Go to the public folder in your project and open the index.html file.
- Copy the CDN code and paste it inside the <head> tag of the index.html.
Run the app and get out like this.
![Run app]()
Image 3. See the view.
Now we will create the Custom Table component and use it there.
Create the components folder, add the BasicTable.jsx file, and update it with the following code. This sample table for viewing purposes demonstrates how to use the MUI Table component.
BasicTable.jsx
Add the CSS part to this.
App.js is called the BasicTable component.
Now we can see the view.
![View]()
Image 4. See the Table view with sample data.
Step 2. Install Axios.
We’ll use Axios to fetch the data and handle CSV export.
Now I'm going to install Axios.
Axios is installed in React to easily make HTTP requests (like GET, POST) to servers.
It simplifies handling requests and responses compared to the native fetch API.
Fetch API Data from a fake API
Here I'm using jsonplaceholder fake Api
This creates a piece of state called data. It starts as an empty array.
SetData is a function that lets you change data.
This is a React hook that runs some code after the component is first loaded (mounted).
The empty array [] means it runs only once, not on every render.
Inside useEffect, there's a function called fetchData.
fetchData() is called immediately inside useEffect to start the fetching.
This prints the data to the console each time the component renders.
![Console]()
Image 5. Console mock user data.
Now we going to map the data to our table.
We're passing a prop called data to the BasicTable component.
The right-hand data is the variable from useState.
<BasicTable data={data} />
![Table]()
Image 6. Mock user data mapped.
Step 3. Install react-csv.
The react-csv package is a simple and helpful library that lets you export data as a CSV file in a React app.
CSV = Comma-Separated Values, a plain text format often used for spreadsheets (like Excel or Google Sheets). Each row is a line of text, and a comma separates each column.
Now I'm going to install react-csv.
I’m adding this code to app.js.
The <CSVLink> component creates a downloadable CSV file link in a React app. It takes in a data prop, the actual array of data you want to export, and a headers prop to define custom column labels and the order in which they appear in the file. The filename prop sets the name of the file that will be downloaded—in this case, "table-data.csv". It also has a className for styling, often using Bootstrap to make it look like a button, and the target="_blank" attribute ensures the download opens in a new tab if needed. When users click the "Export to CSV" link, the data is automatically formatted into a CSV and downloaded to their device.
This checks if data exists. If it does, the button is shown. If the data is empty or null, nothing is rendered.
This comes from the react-csv library. It wraps around the button and handles the CSV file creation and download.
Props inside CSVLink.
- data={data}: the actual data to export.
- headers={headers}: optional column headers for the CSV.
- filename={"table-data.csv"}: the name of the file to download.
- target="_blank": opens the download in a new tab.
The text inside the CSVLink — "Export to CSV" — is what users see and click.
The peace of the code is to be updated in app.js and BasicTable
App.js
BasicTable.jsx
I'm going to run my app.
![Export]()
Image 7. The Download button is available.
No, I'm going to click on the Export CSV button.
![Csv]()
Image 8. See here, it has been downloaded successfully.
Will check the Excel view.
![Excel]()
Image 9. See the view.
Conclusion
With just a few lines of code, you can fetch data using Axios and export it to CSV using react-csv. This feature is handy for admin panels, data management tools, and reporting dashboards.