how to make clickable part of <tr> in next js?

Question

I made clickable the specific part of with the next link and it works fine, but in console, it shows a warning

Warning: validateDOMNesting(...): <a> cannot appear as a child of <tr>.

Here is my code:

<tbody className="cartTableRow">
  {saved.map((item, i) => (
    <tr className="tableBody" key={i}>
      <Link href={`/${item.code}`}>
        <a>
          <td data-aria-label="Продукт">{item?.title}</td>
          <td data-aria-label="Модель">{item?.part_model?.title}</td>
          <td className="compName" data-aria-label="Комп. имя">
            {item?.company?.title}
          </td>
          <td className="compNumb" data-aria-label="Комп. номер">
            {item?.company_pn}
          </td>
          <td className="price" data-aria-label="Цена">
            {item?.tm_price ? item?.tm_price + "TMT" : ""}
          </td>
        </a>
      </Link>
      <td className="delete">
        <button onClick={() => handleDeleteSaved(item)}>{icons.delete}</button>
      </td>
    </tr>
  ))}
</tbody>

        

When I remove the <a> tag, I can't click on it. How can I make it clickable without warnings in the console?

Answer 1

You need to put the Link tag in a <td> pair. It has to be inside a <td> tag. It can't be the direct child of a <tr> tag.

<tbody className="cartTableRow">
    {saved.map((item, i) => (
    <tr className="tableBody" key={i}>
        <td>
            <Link href={`/${item.code}`}>
            <a>
                <td data-aria-label="Продукт">{item?.title}</td>
                <td data-aria-label="Модель">
                    {item?.part_model?.title}
                </td>
                <td className="compName" data-aria-label="Комп. имя">
                    {item?.company?.title}
                </td>
                <td className="compNumb" data-aria-label="Комп. номер">
                    {item?.company_pn}
                </td>
                <td className="price" data-aria-label="Цена">
                    {item?.tm_price ? item?.tm_price + "TMT" : ""}
                </td>
            </a>
            </Link>
        </td>
        <td className="delete">
            <button onClick={()=> handleDeleteSaved(item)}>
            {icons.delete}
          </button>
        </td>
    </tr>
    ))}
</tbody>