Why when I'm adding onClick event to my button, CSVLINK(react-csv) is not working anymore?

Question

I have Node.Js backend and react front-end. I have a query in the backend that returning data based on category name that I enter in an input box. Before I add onClick event in the button it returned the results in a CSV and download it for me. After adding onClick to the button I can see that at the backend I have a successful query but at the front-end, it's not downloading my results in a csv file. I'm using the button from Semantic UI React and CSVLINK from 'react-csv' package.

Here is my code(function that I called in onClick):

handleReportButton(e){

e.preventDefault();
const value = e.target.value;

fetch(`/reportOnAnswersCategory`,{
method: 'POST',
body: JSON.stringify({
  answer: value
}),
headers: {"Content-Type": "application/json"}
  })
.then(data => data.json())
.then((data) => {this.setState({report : data});})
.catch(err => console.error(err));
}

This is the button(I have binded the function before, and I did 'const { report } = this.state;' before return):

<Button onClick={this.handleReportButton}>
  <CSVLink data={report} >Download this report</CSVLink>
</Button>

Thanks in advance for the help

handleReport is asynchronous, so the report data isn't ready until the fetch results come back. Whereas the CSVLink expects the data there already. You can use CSVDownload to let the link do the downloading too. — Jayce444
– Jayce444, Commented May 13, 2018 at 2:47
@Jayce444 Thank you, I'm using this now after you have suggested but how can I prevent CSVDownload from triggering on mounting the component? It triggers downloading ONLY on mounting the component! — Nafis
– Nafis, Commented May 13, 2018 at 3:48
@Jayce444 I have tried 2 ways: 1: I have changed the '<CSVLink ....' line in button with => <CSVDownload data={report} target="_blank" /> , this way it's triggering after call component 2: I have added this line after '.catc(...' in handleReport => return (<CSVDownload data={this.state.report} target="_blank" />); this way nothing happend — Nafis
– Nafis, Commented May 13, 2018 at 4:02

Rohith Murali · Accepted Answer · 2018-06-08 08:39:55Z

0

To download a file in html5 what you can do is, to set an anchor tag with download attribute,

<a href="/reportOnAnswersCategory" download="data.csv" id="btnExport" >Export data into Excel</a>

And when the user clicks the link, the download attribute appears in the save. In this case, the file will be downloaded as “data.csv”

But to pass the 'answer:value' to the api either you can change the node to accept it as a query param and change the url to href="/reportOnAnswersCategory?answer="+{value}, Or you can hide the <a> using css style,display:none and onClick of your button, do document.getElementById("btnExport").click()

Edit: When the download is using a POST request,

fetch(service_url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },

  }).then(response => response.blob())
    .then(response => {
  var blob=response
  var reader = new window.FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function() {
  var base64data = reader.result;

      window.open(base64data);

  }
})
.catch(error => {
  console.error(error);
});

edited Jun 8, 2018 at 8:39

answered May 13, 2018 at 2:42

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

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

5 Comments

Nafis Over a year ago

Thank you Rohith but I'm not using jquery

Rohith Murali Over a year ago

You dont have to implement the jquery function, you can use the <a> and download attribute with href value as the url which can be set ussing your react code

Rohith Murali Over a year ago

Removed the jQuery code and provided two possible solutions

Rohith Murali Over a year ago

Did u get the solution?

Nafis Over a year ago

unfortunately not yet

Collectives™ on Stack Overflow

Why when I'm adding onClick event to my button, CSVLINK(react-csv) is not working anymore?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related