Invalid Hook Call In Functional Component for Refs

Question

I am trying to use a package called react-bootstrap-table to build a table structure with tags. I am having issues trying to deal with refs combining a class based components with functional components. With the table, I have functional components which create tags which when you click on each individual tag, I am hoping to click to fill a input with that tag as part of the original class input.

I currently getting invalid hook calls so I was wondering if anyone had any suggestions to see if I am understanding reference hooks in react correctly or not.

Bootstrap Table

<BootstrapTable data={this.state.literature} 
              striped
              hover
              pagination
              ignoreSinglePage
              search
              version='4'
              >
              <TableHeaderColumn isKey dataField='title' width='50%'>Title</TableHeaderColumn>
              <TableHeaderColumn dataField='tag' ref='tagCol' dataFormat = {tagFormatter} filter = { { type: 'TextFilter', delay: 300  }} width='12%'>Tags</TableHeaderColumn>

Functional Component

// Tag formats
// Run a mapper on the tag column to generate x number of Tags for tag
function tagFormatter(cell, row) {
  const tagCol = React.useRef(null);

  const handleTagClick = (tag) => {
    tagCol.applyFilter(tag);
  }

  return (
    <div>
      {cell.map((tag, i) =>
        <span className="badge badge-pill badge-info" onClick={ e => this.handleTagClick(tag) } key = {i}>tag</span>
        )
      }

    </div>


  );    
}

Answer 1

As also noted by @LincolnAnderson , you may have meant to write ref={tagCol} in the second TableHeaderColumn .

Moreover, inside handleTagClick function, you are accessing the ref in the wrong way.

Citing React documentation:

Essentially, useRef is like a “box” that can hold a mutable value in its .current property.

Hence, the correct code would be:

  const handleTagClick = (tag) => {
    tagCol.current.applyFilter(tag);
  }