How can i make the entire row of a table clickable in react js using <Link> or any other way?

Question

here is the code

<tbody>
    <tr>
     <td>
      <Link to={{pathname: '/user',
                 state: {
                   number: content.number,
                   name: content.name,
                   age: content.age
                 }
               }}
      />
     {content.accountOwner}
    </td>
    <td>
      {content.address}
   </td>
   <td>{content.profession}</td
  </tr>
</tbody>

This row becomes clickable in chrome but in IE as the is put in the first column, only the first column becomes clickable and not the entire row. Can anyone please help me to resolve this issue?

Answer 1

You can use .push() method to programatically navigate to that page. If you are using the latest react-router-dom you can use the useHistory hook to be able to use the push method. Another advantage from push() will not break your UI, since the <Link /> component could cause problems in your UI since it's another element nested.

import React from 'react';
import { useHistory } from 'react-router-dom';

export const ExampleComponent = ({ content }) => {
  const history = useHistory();

  function handleRowClick() {
    const { number, name, age } = content;
    history.push('/user', { number, name, age });
  }

  return (
    <tbody>
      <tr onClick={handleRowClick}>
        <td>
          {content.accountOwner}
        </td>
        <td>
          {content.address}
        </td>
        <td>{content.profession}</td>
      </tr>
    </tbody>
  )
};