Go to a link when clicked inside a Table.Row with onClick

Question

I have a table and I want each row to be clickable and when you click on it to go to that link (which is different for each row).

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row
      key={idList && idList[rowIndex]}
      onClick={() => {
        <Link
          to={
            entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
          }
        />;
      }}>
      ...
    </Table.Row>
  ))}
</Table.Body>

So I did it like above, added a component but doesn't work. It says:

Expected an assignment or function call and instead saw an expression no-unused-expressions

I'm using Table / Table.Row from Semantic UI and Link from react-router-dom. I cannot change the Table but the Link component isn't mandatory. It would be great anyway if it can redirect to that link when it's clicked.

Is it any way to do this?

This could be usefull [https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs](https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs) — Jon, Jul 14 '20 at 08:36
@Jon, I tried that way but it doesn't work becasue my link is personalized for each row, it has its row id in it. it that example they are setting the state of something on true and when it's true the page redirects to the same link — Samurai Jack, Jul 14 '20 at 08:47
@SultanH., it's a class-based component. Here is the whole file: https://pastebin.com/KVUa71Rk, where I put alert("HERE") it should be the link part — Samurai Jack, Jul 14 '20 at 08:51
k.s. answer below will work for you, use the -older version of react- ref in order to have the full aspect of it, I'll suggest an edit for k.s.'s answer as well. — Sultan H., Jul 14 '20 at 08:54

k.s. · Answer 1 · 2020-07-14T09:13:39.767

1

One way would be is to use the history to navigate from the component. To get the history object, you either need to use the useHistory() hook which is available from react-router:5.1.0 or if you are using a older version of react-router

you will have to add a method that does it:

Functional

const onNavigate = (entityName, idList) => () => {
  entityName && history.push( && `/${entityName}/${idList[rows.indexOf(row)]}`) // change accordingly 
}

Class

onNavigate = (entityName, idList) {
  return function () {
    return entityName && this.props.history.push( && `/${entityName}/${idList[rows.indexOf(row)]}`) // change accordingly 
  }
}

This method returns a function reference, so that the onCLick prop doesn't trigger it on render and some_props will be visible in the inside function thanks to Closures

you pass the method to the onClick method:

<Table.Body>
  {rows.map((row, rowIndex) => (
    <Table.Row
      key={idList && idList[rowIndex]}
      onClick={onNavigate(enitityName, idList)}
    >
      ...
    </Table.Row>
  ))}
</Table.Body>

this way the click handler will receive the a function reference and should navigate to the according url

edited Jul 14 '20 at 09:13

answered Jul 14 '20 at 08:47

k.s.

2,964
1
25
27

where should be onNavigate declared? inside render? or it is a method outside of render – Samurai Jack Jul 14 '20 at 09:03
I'm showed how to use it in a functional component. I'll update for a class based – k.s. Jul 14 '20 at 09:05
this is the whole file: https://pastebin.com/KVUa71Rkm, where I put alert("HERE") it should be the link part – Samurai Jack Jul 14 '20 at 09:07
This page is no longer available. It has either expired, been removed by its creator, or removed by one of the Pastebin staff. – k.s. Jul 14 '20 at 09:11
you should use the **Class** example – k.s. Jul 14 '20 at 09:14
so I made the changes, here is the modified file: https://pastebin.com/4D3aFw63, I guess there is a problem with `this.props.history` because that doesn't exist. I added logs and clicked on the first row from the table and this is what it shows: https://i.imgur.com/hePDIt7.png, there is no `this.props.history`, should it be add somewhere? – Samurai Jack Jul 14 '20 at 09:25
I added instructions on how to add history to the app. It must be a component which is used for routing though, or you need to pass it through props to this one. Use http://codesandbox.io/ to show some workable example. – k.s. Jul 14 '20 at 09:28

score 0 · Answer 2 · answered Jul 14 '20 at 08:49

0

Using react-router to link inside the react application you can use the useHistory hook and push the new path.

import { useHistory } from "react-router-dom";

function Component() {
  let history = useHistory();

  return (
    <Table.Body>
      {rows.map((row, rowIndex) => (
        <Table.Row
          key={idList && idList[rowIndex]}
          onClick={() =>
            history.push(
              entityName && `/${entityName}/${idList[rows.indexOf(row)]}`
            )
          }
        >
          ...
        </Table.Row>
      ))}
    </Table.Body>
  );
}

answered Jul 14 '20 at 08:49

Jørgen

352
2
12

I get this error message: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app – Samurai Jack Jul 14 '20 at 08:55

Go to a link when clicked inside a Table.Row with onClick

2 Answers2