so basically my usecase is that when i click the download button present in each row of the table, my data returned should be downloaded via CSV. I'm creating the ref like this
class ViewStorageGroups extends Component {
csvLink = React.createRef();
This is my custom component which renders a table
<TableWithHeaders
tableHeaders = {tableData.tableHeaders}
rowData = {tableData.rowData}
formatter = {tableData.formatter}
handleClick = {this.handleClick}
clickable = {tableData.clickable}
page = {rowsPerPage}
rowsPerPage = {rowsPerPage}
handlePageChange = {this.handlePageChange}
handleChangeRowsPerPage = {this.handleChangeRowsPerPage}
/>
this is my handleClick function which gets called when i press the download button
handleClick = (rowData, clickComponent,e) => {
const storageGroupDto = StorageGroupHelpers.convertStorageGroupDataToDto(rowData)
this.setState({groupDataDownloadResp: storageGroupDto}, () => this.csvLink.current.link.click())
}
and i'm using React's CSVLink component to download the data as csv.
renderDownloadedData = () => {
const fileName = createFileNameForCSVDownload('STORAGE_GROUP_DOWNLOAD', getWarehouseIdFromRedux(this.props))
return (
<div>
<CSVLink
ref={this.csvLink}
data={this.state.groupDataDownloadResp}
filename={fileName}
target='_blank'
/>
</div>
)
}
Now the issue is when handleClick is triggered, my this.csvLink.current is coming as null. the same implementation is present at other places in my codebase and working fine correct. i'm not able to figure out where i'm going wrong
I have also tried initialising csvLink = React.createRef(); at componenentDidMount and the constructor but still the same error is occuring.
finally got the issue but not sure the Reason. if i use
<CSVLink
ref={this.csvLink}
data={this.state.groupDataDownloadResp}
filename={fileName}
target='_blank'
/>
inside a arrow function like this
renderDownloadedData = () => {
const fileName = createFileNameForCSVDownload('STORAGE_GROUP_DOWNLOAD', getWarehouseIdFromRedux(this.props))
return (
<div>
<CSVLink
ref={this.csvLink}
data={this.state.groupDataDownloadResp}
filename={fileName}
target='_blank'
/>
</div>
)
}
and then call this inside render like this
render () {
return (
{this.renderDownloadedData()}
)
}
It returns reactRef()'s current value as null. however if I dont use arrow function and use the function like this renderDownloadedData (), it works perfectly fine. if someone can explain me the reason i would be very grateful