title: How to pass a function prop to be used within react-table's columns
body: <p>I am trying to pass a function to be used within ReactTable. Note that I'm referring specifically to <a href="https://react-table.js.org/" rel="nofollow noreferrer">https://react-table.js.org/</a></p>
  
  <p>This is what I've attempted.
  I defined MyFunctionCallback() in the parent of MyWrapper, and pass it through to ReactTable, for example:</p>
  
  <pre><code>&lt;ReactTable
      MyFunctionCallback  = this.props.MyFunctionCallback
      data                = etc
      columns             = etc...
  /&gt;
  </code></pre>
  
  <p>and use it like this...</p>
  
  <pre><code>class MyWrapper extends Component{
  
      render() {
  
         var rowsArray = this.props.MyDataArray
  
         var colsDef = [
          {
            Header: "First name",
            accessor: "fname"
          },
          {
            Header: "Last name",
            accessor: "lname"
          },
          {
            Header: "Select",
            Cell: ({row}) =&gt; (&lt;a href='#' onClick={(row) =&gt; this.props.MyFunctionCallback('abc', row._original.ID)}&gt; View
                                  &lt;/a&gt;
                              )
          }
        ]
  
         return (
              &lt;ReactTable
                      MyFunctionCallback = this.props.MyFunctionCallback
                      data ={rowsArray}
                      columns ={colsDef}
                      ...etc...
              /&gt;
  
          ); //end-return
      } //end-render
  }
  
  export default MyWrapper;
  </code></pre>
  
  <p>Almost works.. except this is not the correct way of doing it, otherwise i would not be asking the question.</p>
  
  <p>How to do it? (please keep it simple, don't need any fancy HOC :-)</p>
  
  <p><strong>Update</strong></p>
  
  <ol>
  <li>onClick={(row) => etc... should read onClick={() => etc...</li>
  <li>use accessor: 'ID' so that you don't have to use row._original.ID, simply do row.ID</li>
  </ol>
  
  <p>so corrected section should be:</p>
  
  <pre><code>{
    Header: "Select",
    accessor: "ID",
    Cell: ({row}) =&gt; (
      &lt;a href='#' onClick={() =&gt; this.props.MyFunctionCallback('abc', row.ID)}&gt;
          View
      &lt;/a&gt;
      )
  }
  </code></pre>