how to make clickable part of 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 cant click on it. How can I make it clickable without warnings in the console?

simply add style prop on component you want clickable `style={{cursor:"pointer"}}` — Inder, May 01 '22 at 17:03

score 0 · Answer 1 · answered May 01 '22 at 17:06

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>

how to make clickable part of in next js?

1 Answers1