createRef().current is coming as null in React

Question

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.

score 0 · Answer 1 · answered Sep 23 '21 at 20:10

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

No pun intended, but **this** may help - https://stackoverflow.com/questions/31095710/methods-in-es6-objects-using-arrow-functions — Ian Craddock, Sep 23 '21 at 20:22

createRef().current is coming as null in React

1 Answers1