0

im trying to render a table but keep getting this error Hydration failed because the initial UI does not match what was rendered on the server i have searched a bit and eliminated any restricition for nextjs such as wrapping using p tag or missing tbody in table or using div inside a td tag and still get the same error on the same table

<table>
  <thead>
    <tr>
      <th className="champ th">placeholder</th>
      <th className="champ th">placeholder</th>
      <th className="champ th">placeholder</th>
      <th className="champ  th">placeholder</th>
      <th className="champ">placeholder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" />
      </td>
      <td>
        <input type="number" />
      </td>
      <td>
        <input type="number" />
      </td>
      <td>
        <input type="number" />
      </td>
      <td>
        <button type="button">+</button>
      </td>
    </tr>
    <tr>
      <td>
        <span className=" input-error text-danger">{errorMessage}</span>
      </td>
      <td>
        <span className="input-error text-danger">{errorMessage}</span>
      </td>
      <td>
        <span className="input-error text-danger">
          {errorMessage.product_unit_price}
        </span>
      </td>
    </tr>
    {data.map((selected, index) => {
      return (
        <tr>
          <td>
            <input type="text" />
          </td>
          <td>
            <input type="number" />
          </td>
          <td>
            <input type="number" />
          </td>
          <td>
            <input type="number" />
          </td>
          <BiTrash />
        </tr>
      );
    })}
  </tbody>
</table>

used next js 13.4.13 with react 18.2.0

Ahmed Sbai
  • 10,695
  • 9
  • 19
  • 38
nappou
  • 1
  • 2
  • What's ``? – Audun Hilden Aug 15 '23 at 09:30
  • its a react icon `import { BiTrash } from "react-icons/bi";` @AudunHilden – nappou Aug 15 '23 at 09:32
  • If you delete the table, does the error also disappear? If not, maybe you have something similar to what is described here in other components https://stackoverflow.com/a/71870995/14714168 – Victor Aug 15 '23 at 10:09
  • @Victor yes it does disappear, though i think i found where the problem is i ad an hr tag that i didnt notice and it was the cause since im guessing next is strict about its html elements so any foreign tag would create this problem . Thank you. – nappou Aug 15 '23 at 10:39
  • @nappou you're welcome – Victor Aug 15 '23 at 11:04

0 Answers0