How to Import & Export CSV File with React

Hello friends welcome back to the new tutorial of the react so today we are going to learn about the import and the export so those who haven't subscribed my channel yet please do subscribe my channel and if you like the video please do like share and comment on my video so let's get started so here you can see that I have just browsed the file you can see you can see all the records are rendered then I will try to export it when I click on export you can see that the data is exported over here so how we are going to do that functionality we have a Plugin or npm package that is XLS sheet.js okay so basically I am using this package to read the CSV file so it's very very high uh like you know download package you can see that too much downloads of that one that means it's a very good package that we have to use so I'm using that one so let's have a dive into the code level so first of all we have app.js file where we have an import component of the component which do the rest of the things right so this import component this one okay then we are using the xlsx which have the function read utils and the right file okay so this is the state initialization users and the set users then when we have a handle import so whenever we have our uh when we click on the import file okay so we are trying to read the files right so this is Target files if the length is if there is a length then we will pick up the file and the reading the file on load we are reading the sheet names okay the if the sheets dot length then we are writing into the sheet dot Json sheet to Json we have to write in and then set all the rows into that users right it is done all the data is in the set users part then we are reading as a buffer file the file name okay after that we when we have a export this is for this is for the import part right when we try to import when we import we are set all the data into the set users part okay then we have a handle export so here we have a name email H we are just making the headings then we have a new book book then we have a utilization to sheet okay then we are at adding the headings then we are using the a2s sheet okay then we have getting all the users you can see that all the users part then append the sheet with the report then write all the data into the report.xls files so basically it is the export via and the file is whether you want to make the Expo XLS file or CSV file or whatever you can just put you can just write it over here right after this we have this one this is the file okay this is the HTML file right where we are trying to do accepting the CSV files or whatever file you can accept and then we are click on the handle export export button then it will trigger this handle export this function will trigger when we try to export that part right and then when we have just uh click on the import part then we have this function that is handle import so you can see that whenever with reload the file so all the data whatever we have we are going to just render it in the tabular form you can see that handle export or handle import okay and after choosing the file and and the data we are getting in that uses dot length Okay so all the data is set into the users okay you can see that this state we have the data by default the state has the empty so you can see that users so we are just save all the data in the users part so we are just mapping it and showing into the front of it okay nothing more on that okay you can see that so this is how we are able to Import and Export the CSV in the react part okay so the main part is whenever we have a import functionality okay so what we are doing just we are just doing that that part and if you want to save that data into the database then you can hit the API over here whenever you try to import hit the API put all the data into that part and save that and render over here or whether you want to render from the API or you can do the vice versa of it right so any doubt any query in that just let me know in the comment section this is very simple and very easy lines of code okay and you will also get some of the code Snippets from the XLS part because I have I have think that it is there right so you can see that okay how to import that require this is basically the node shares part right so you can you can use that you can see there XLS your tells book append sheet so whether you want to append the book you can see that I have also used this part right book a pen so this is you can see that WB this is our you can you you tell suggestion to sheet and this is new book that we have created same thing workbook sheet a sheet to a true okay so this is the thing workbook that is a sheet okay this is workbook that is the sheet and here we have whatever the name of the sheet that we are passing over here right so this will append that part okay so all the functions all the functionality of whatever it is it is you will get it from here right to create a new book to append a worksheet to a workbook okay so all the things of the whatever I have written over here like this pack sheet to add AO and add Json all this stuff you will get it from this documentation okay so any doubt any query in that let me know in the comment section thank you so much for watching this video have a great day

Channel: Technical Rajni

Views: 5,619

Keywords: How to Import & Export CSV File with React, How to Import CSV File with React, How to Upload CSV File in React JS, How to export data to Excel or CSV with React-js, Export to CSV button in react table, react, csv, javascript, react js, react js tutorial, react tutorial, csv to json, reactjs, learn react, reactjs tutorial, react tutorial for beginners, reactjs tutorial for beginners, react js crash course, react course, react crash course, learn react js, learn reactjs

Id: JcGVsYaJ9fI

Length: 6min 11sec (371 seconds)

Published: Sun Feb 12 2023