Esportare dati JSON in CSV con React e react-csv

In questo articolo vediamo come esportare dei dati JSON in formato CSV usando React e react-csv.

Per l'articolo ci servirà anche axios, che useremo per visualizzare i dati da un JSON remoto.

Possiamo installare entrambe le librerie con npm:

npm install react-csv axios

A questo punto vediamo il componente:

import './App.css';
import {useEffect, useState} from "react";
import axios from "axios";
import {CSVLink} from "react-csv";

function App() {
    const fileName = "export";
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const headers = [
        {label: "Id", key: "id"},
        {label: "Name", key: "name"},
        {label: "Email", key: "email"},
    ];

    useEffect(() => {
        getUserData();
    }, []);

    const getUserData = () => {
        setLoading(true);
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then((res) => {
                setData(res.data);
                setLoading(false);
            })
            .catch((err) => {
                setLoading(false);
            })
    }

    return (
        <div className="App">
            <button>
                <CSVLink
                    headers={headers}
                    data={data}
                    filename={fileName}
                >
                    {loading ? 'Loading csv...' : 'Export Data'}
                </CSVLink>
            </button>

            <table>
                <thead>
                    <tr>
                        {headers.map(row => {
                            return (
                                <th style={{"fontWeight": "bold"}}>{row.label}</th>
                            )
                        })}
                    </tr>
                </thead>

                <tbody>
                    {data.map(row => (
                        <tr key={row.id}>
                            <td>{row.id}</td>
                            <td>{row.name}</td>
                            <td>{row.email}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

export default App;

Abbiamo usato CSVLink per salvataggio in formato CSV.

In pratica gli abbiamo passati gli stessi dati che abbiamo passato alla table; ed anche lo stesso headers (che non è obbligatorio).

Anche il nome del file in realtà non è obbligatorio.

Enjoy!