React and navigating to a selected item

Question

I have a table of user I am displaying to a user. They click a row, and I want to navigate to a component to show the details.

  <tbody>
    {this.state.clients.map(client => (
      <tr className="tableRow" onClick={() => this.handleSelection(client.id)}>
        <td>{client.name}</td>

My Route is setup like this:

<Route path="/client/:clientId" component={Client} />

So in the row, I have an onClick event, which calls a function, passing the parameter selected. Here's the function:

  handleSelection(clientId) {
    this.props.history.push(`/client/${clientId}`);
  }

Then, in the constructor of the target component, I am just logging the selected id, which will be passed to the api to load the data:

console.log('Loading clientId...', this.props.match.params.clientId);

But this seem wrong. I get the right ID and all, but .. am I doing this right? Is there a better/safer way to do what I am doing?

Answer 1

Another option would just be to use individual Link tags inside each TD:

<td><Link to={`/client/${client.id}`}>{client.name}</Link></td>

That would also be more accessible, since vision impaired users might have trouble triggering that onclick event.

Answer 2

If you're using react-router-dom it has a Link component

{this.state.clients.map(client => (
  <Link to={`/client/${clientId}`} >
    <tr className="tableRow">
      <td>{client.name}</td>
  </Link>

It's better to use a link rather than an onClick on on a table row for accessibility. If you're not using react-router-dom you can roll your own version from looking at the source - https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js

By working in this way it'll behave correctly when people command click on the link to open it in a new tab.

For the routes you grab the params as you have, if you don't want the component to deal with match in the properties you can do something like this:

<Route path="/client/:clientId" children={({ match }) => (<Client {...match.params} />)} />