Passing react-router <Link> component to the table cell

Hello,

got a problem trying to create a hyperlink inside a table cell using react-router <Link> component.

I wrote the following function:

function tenantLinkFormat(cell, row) {
    const link = <Link to="/users">cell</Link>;
    console.log(cell);
    console.log(link);
    return link;
}

And got this error message in console:

warning.js:36 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of TableBody.

The console output with the objects looks as follows: http://i.imgur.com/RyFGBCD.png

So it seems to me that everything is correct, but it isn’t apparently. Please point me to what should be fixed here.

[bmueller-sykes]

also, wouldn’t this work:

<TableHeaderColumn dataField='id' dataFormat={ this.colFormatter }>my header</TableHeaderColumn>

…and then:

  colFormatter = (cell, row) => {
    return (
      <Link to='/some/route'>
        {cell}
      </Link>
    )
  }

That appears to work for me.

[FreeClimb]

To navigate using a React Router, you can disable default behavior and turn on the onClick

`import React, { Component } from ‘react’ import { Route } from ‘react-router-dom’ import { BootstrapTable, TableHeaderColumn } from ‘react-bootstrap-table’ … class LinkTable extends Component {

hrefIdFormatter = (cell, row) => { const href = product/${row.id}; return ( <Route render={({ history }) => ( <a href={href} style={{ cursor: ‘pointer’ }} onClick={(e) => { // stop default behavior a href e.preventDefault(); // set state selected product id this.set({ …this.state, selected: row.id }); // go to the detail product page history.push(/product/${row.id}) }}> {row.id} )} />) } render() { return ( <BootstrapTable data={this.props.products}> <TableHeaderColumn dataSort={true} dataField=“id” width=“5%” thStyle={{ fontWeight: 500 }} tdStyle={{ fontSize: ‘0.8rem’ }} dataFormat={this.hrefIdFormatter} isKey>ID</TableHeaderColumn> … </BootstrapTable> ) } }`