Call method and pass link value on click in table?

Question

I have a custom table component and would like to pass the value of a table element when it is clicked. The issue is that the custom table component I am using is triggering the react router and I am not sure how to assign an onClick event handler to the "Link" element in my table.

Here is where I assign the value to the links and where I would l like to call my method (getPreauthorizedLink):

fetch(config.api.urlFor('xxx'))
.then((response) => response.json())
.then((data) => {

  data.array.forEach(element => {
    element.link = (<a href={element.link}>Report</a>)
  })

  this.setState({reportJSON: data.array || [], tableIsBusy: false})

})
.catch((err) => _self.setState({tableIsBusy: false }));

This is how I tried to implement one the of the recommend solutions:

   fetch(config.api.urlFor('xxx'))
    .then((response) => response.json())
    .then((data) => {

      data.array.forEach(element => {
        element.link = (<a onClick={this.getPreauthorizedLink(element.link)}>Report</a>)
      })

      this.setState({reportJSON: data.array || [], tableIsBusy: false})

    })
    .catch((err) => _self.setState({tableIsBusy: false }));

Here is my table implementation:

<div className="table-responsive">
              <Busy isBusy={this.state.tableIsBusy}>
                  <Table
                    headers = {[
                        'Date',
                        'Title',
                        'Link'
                        ]}
                    data = {reportJSON}
                    />
                </Busy>
              </div>

And this is my custom table component:

class Table extends React.Component {
  componentWillMount() {
    this.componentWillReceiveProps(this.props);
  }

  componentWillReceiveProps(nextProps) {
    const idColumn = nextProps.idColumn || '',
      labelColumn = nextProps.labelColumn || '',
      headers = nextProps.headers || [],
      data = nextProps.data || {},
      path = nextProps.path || '',
      linkPath = nextProps.linkPath || '',
      params = nextProps.params || {},
      page = parseInt(nextProps.page || 1),
      pageSize = parseInt(nextProps.pageSize || 10),
      totalRecords = parseInt(nextProps.totalRecords || 0),
      orderByColumns = nextProps.orderByColumns || [],
      orderBy = nextProps.orderBy || [],
      dir = nextProps.dir === 'desc' ? 'desc' : 'asc',
      visible = parseInt(nextProps.visible || 7);

    this.setState({
      idColumn: idColumn,
      labelColumn: labelColumn,
      headers: headers.map(v => ({label : _.get(v, "label", v), tooltip : _.get(v, "tooltip", _.get(v, "label", v)) }) ),
      data: data,
      path: path,
      linkPath: linkPath,
      params: params,
      page: page,
      pageSize: pageSize,
      totalRecords: totalRecords,
      orderByColumns: orderByColumns,
      orderBy: orderBy,
      dir: dir,
      visible: visible
    });
  }

  render() {
    let { idColumn, labelColumn, headers, data, path, linkPath, params, page, pageSize, totalRecords, orderByColumns, orderBy, dir, visible } = this.state;
    const columns = data && data.length ? Object.keys(data[0]) : [];

    orderByColumns = orderByColumns.length ? orderByColumns : columns.filter((col) => col !== idColumn);

    const isDataToDisplay = Boolean(data.length > 0);


    return (
      <React.Fragment>
        {
          isDataToDisplay 
          ? (
            <table className="table table-striped">
              <thead>
                <tr>
                  {columns.filter((col) => col !== idColumn).map((col, i) =>
                    path && path.indexOf(':orderBy') > -1 && path.indexOf(':dir') > -1 && orderByColumns[i] ? (
                      <th key={i}><LinkToPath path={path} params={params} replace={{ orderBy: orderByColumns[i], dir: orderBy === orderByColumns[i] && dir === 'asc' ? 'desc' : 'asc' }}>{_.get(headers[i], "label") || col}</LinkToPath></th>
                    ) : (

                      <th key={i}>
                        <Tooltip
                          placement="top"
                          trigger={['hover']}
                          overlay={<div style={{maxWidth: 300}}>{ _.get(headers[i], "tooltip", _.get(headers[i], "label", headers[i] || col))}</div>}
                          arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
                        >
                          <span>{_.get(headers[i], "label") || col}</span>
                        </Tooltip>
                      </th>
                    )
                  )}
                </tr>
              </thead>
              <tbody>
                  {data.map((row, i) =>
                    <tr key={i}>
                      {columns.filter((col) => col !== idColumn).map((col) => ({ key: col, value: row[col] })).map((data, j) =>
                        data.key === labelColumn && linkPath.indexOf(`:${data.key}`) ? (
                          <td key={j}><Link to={`${linkPath.replace(`:${idColumn}`, row[idColumn])}`}>{data.value}</Link></td>
                        ) : (
                          <td key={j}>{data.value}</td>
                        )
                      )}
                    </tr>
                  )}
              </tbody>
            </table>
          )
          : (
            "None"
          )
        }
        <PaginatedLinks onPageChanged={this.props.onPageChanged} path={path} params={params} page={page} pageSize={pageSize} totalRecords={totalRecords} visible={visible} />
      </React.Fragment>
    );
  }
}

export default Table;

How can I call a method (getPreauthorizedLink) on click of the "Link" element and pass the value of that table element to the table?

Answer 1

Should be something like

const clickMethodWithValue = val => () => { clickMethod(val); }

<Link onClick={clickMethodWithValue(data.value)} ... >{data.value}</Link>