How to write data in a csv file within single-page-application(React JS )?

Question

I want to write or overwrite data(or insert row) in a csv file within react-application(create-react-app) . My App.js file for now is -

import React, { Component} from 'react';

const csvData =[
  ['Ahmed', 'Tomi' , '[email protected]'] ,
  ['Raed', 'Labes' , '[email protected]'] ,
  ['Yezzi','Min l3b', '[email protected]']
];

export default class App extends Component {

    render() {
        return(
            <div>
            </div>
            );
    }

}

Here , I want to insert csvData in a csv file called data.csv within my react-application

my data.csv for now is :

Name,NickName,Email
Rahul B.,Rah,[email protected]
Abhinav K.,Abhi,[email protected]
Akshay G.,Aksh,[email protected]

where

Name,NickName,Email

are headers of my csv file .

I want my data.csv to look like -

Name,NickName,Email
Rahul B.,Rah,[email protected]
Abhinav K.,Abhi,[email protected]
Akshay G.,Aksh,[email protected]
Ahmed, Tomi , [email protected]
Raed, Labes , [email protected]
Yezzi,Min l3b,[email protected]

So how to update data.csv with my App component (React component) .

Thanks in advance .

Do you mean on the users file system? The browser does not have access to the users file system because that would be a massive breach of security. If you want to generate a CSV file and make it available for download you will need to do it server-side. — Anthony Manning-Franklin
– Anthony Manning-Franklin, Commented Mar 31, 2018 at 16:02
I want it within my project-structure i.e I have already created a csv file within my project structure with the location of the directory known . Is that possible ? @AnthonyManning-Franklin — Suraj Sharma
– Suraj Sharma, Commented Mar 31, 2018 at 17:03
If your react application is running in a web browser then it cannot access the file system. If it were a native desktop application, i.e. React running in Electron, then it could access the file system. — Anthony Manning-Franklin
– Anthony Manning-Franklin, Commented Apr 1, 2018 at 8:19

Sagar Ahuja · Accepted Answer · 2020-01-28 12:00:08Z

4

You can use this library which was helpful to me

https://www.npmjs.com/package/react-csv

Please note this command will install the library in your project folder.

npm i react-csv

import {CSVLink, CSVDownload} from 'react-csv';

const csvData =[
  ['firstname', 'lastname', 'email'] ,
  ['Ahmed', 'Tomi' , '[email protected]'] ,
  ['Raed', 'Labes' , '[email protected]'] ,
  ['Yezzi','Min l3b', '[email protected]']
];

<CSVLink data={csvData} >Download me</CSVLink>
// or
<CSVDownload data={csvData} target="_blank" />

edited Jan 28, 2020 at 12:00

answered May 21, 2018 at 8:36

Sagar Ahuja

7246 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to write data in a csv file within single-page-application(React JS )?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related