One feature that we will also implement is a CSV export of the data. There is package, called react-csv (https://github.com/abdennour/react-csv), that can be used to export an array of data to the CSV file.

If your app is started, stop the development server by pressing Ctrl + C in the terminal, and type the following command to install react-csv. After installation, restart the app:

npm install react-csv --save

The react-csv package contains two components—CSVLink and CSVDownload. We will use the first one in our app, so add the following import to the Carlist.js file:

import { CSVLink } from 'react-csv';

The CSVLink component takes the data prop, which contains the data array that will be exported to the CSV file. You can also define the data separator using the separator prop (the default separator is a comma). Add the CSVLink component inside the return statement in the render() method. The value of the data prop will now be this.state.cars:

// Carlist.js render() method
return (
  <div className="App">
    <CSVLink data={this.state.cars} separator=";">Export CSV</CSVLink>
    <AddCar addCar={this.addCar} fetchCars={this.fetchCars}/>
    <ReactTable data={this.state.cars} columns={columns} 
       filterable={true} pageSize={10}/>
    <ToastContainer autoClose={6500}/> 
  </div>
);

Open the app in your browser and you should see the Export CSV link in our app. The styling is not nice, but we will handle that in the next chapter. If you press the link, you will get the data in the CSV file:

Now all the functionalities have been implemented.