'validateDOMNesting(...): <td> cannot appear as a child of <tbody>. even the Structure is ok
The structure is ok but I do get this error
But I dont have any <td> inside <tbody> only <td>s inside <tr>
my code is
<table className="min-w-full divide-y divide-gray-200 ">
<thead className="bg-gray-100">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<input
onChange={(e) => {
setAllChecked(!allChecked);
setData(data.map(item => {
return {...item, isChecked: !allChecked}
}))
if (allChecked) {
setSelectedRows([])
} else if (!allChecked) {
setSelectedRows(data);
}
}}
checked={allChecked}
id="remember-me"
name="remember-me"
type="checkbox"
className="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"
/>
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Product Name / Product id
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Product Category
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Brand
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Price
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Stock
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Status
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">Action</span>
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{data.length > 0 ? <>
{data.map((product) => (
<tr
className={`${data.indexOf(product) % 2 === 0 ? 'bg-gray-50' : 'bg-white'}`}
key={product.id}>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<input
onChange={() => {
setData(data.map((item) => {
if (item.id === product.id) {
item.isChecked = !item.isChecked;
}
return item;
}));
setSelectedRows(data.filter((item) => item.isChecked));
}}
checked={product.isChecked}
id="remember-me"
name="remember-me"
type="checkbox"
className="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"
/>
</td>
<td className="px-6 pl-2 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="ml-4">
<div
className="text-sm font-medium text-gray-900">{product.name.length > 20 ? product.name.slice(0, 20) + '...' : product.name}</div>
<div className="text-sm text-gray-500">{product.id}</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="ml-4">
<div
className="text-sm font-medium text-gray-900">{product.category}</div>
<div
className="text-sm text-gray-500">{product.mainProductCategory}</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">{product.brand}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$ {product.price}</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.stock}</td>
<td className="px-6 py-4 whitespace-nowrap">
{product.isPublished ? <>
<span
className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Published</span></>
: <>
<span
className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Not Published</span>
</>}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<span className="relative z-0 inline-flex shadow-sm rounded-md">
<button
onClick={(x) => {
changePublishedStatus(product.id, !product.isPublished)
}}
type="button"
className={`relative inline-flex items-center py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500 ${product.isPublished ? 'px-4' : 'px-6'}`}
>
{product.isPublished ? 'Unpublish' : 'Publish'}
</button>
<button
type="button"
className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
>
Edit
</button>
<button
onClick={() => {
deleteProduct(product.id)
}}
type="button"
className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500 "
>
Delete
</button>
</span>
</td>
</tr>
))}
</> : <>
<tr>
<td></td>
<td></td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span
className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-red-100 text-red-800">
No results found. Please refine your search or add Products.
</span>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</>}
</tbody>
</table>how to fix this
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|