How to mount a component on click?

Question

I'm using this react-csv , and it triggers the download only when it gets mounted. The problem is that I have a normal material button, and I need to trigger that when that button is clicked:

<MButton id="csv-download" onClick={<CSVDownload data={this.state.rowData} filename={"relatorio.csv"} target="csv-download"/>} style={{
    ...buttons.action,
    ...buttons.topRight
}}>Exportar</MButton>

The component inside the onClick sounds absurd, but I've put it there to illustrate my point. How can I do it?

Answer 1

I've not tested this, but I've done something like this in the past:

downloadCSV() {
  this.setState({
    downloadCSV: true
  })
}

renderCSVDownload() {
  if(this.state.downloadCSV) {
    return (
      <CSVDownload 
        data={this.state.rowData} 
        filename={"relatorio.csv"} 
        target="csv-download"/>
    )
  }
}

render() {
  return (
    <div>
      <MButton id="csv-download" onClick={this.downloadCSV} style={{
          ...buttons.action,
          ...buttons.topRight
      }}>Exportar</MButton>
      {this.renderCSVDownload()}
    </div>
  )
}

While CSVLink already does what you are attempting, it is not a Material button ( MButton ):

<CSVLink
  data={this.state.rowData} 
  filename={"relatorio.csv"} 
  target="csv-download"
>Exportar</CSVLink>