I am attempting to create a nested map within a looped map. However, as this is my first time using JavaScript, I am finding it a bit challenging to use the correct tags. My goal is to create a table where the first row displays the category and the second row displays the items associated with each category. I have already created the thead section, but I am encountering an issue with the array.map function. Here is what I have tried so far:
{posts.map((category)=> (
<tr>
<td className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
</td>
<td className={
"px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left " +
(color === "light"
? "bg-red-50 text-red-500 border-red-100"
: "bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700")
}>
{category.name}
</td>
</tr>
{
posts.filter((post)=>post.type_id===category.id).map((post) => (
<tr key={ post.id }>
<td className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
{post.id}
</td>
<td className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
{post.mapel}
</td>
<td className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
{post.class1}
</td>
<td className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
{post.class2}
</td>
<td className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
{post.class3}
</td>
<td className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
{post.class4}
</td>
<td className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
{post.class5}
</td>
<td className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">
{post.class6}
</td> <td>
<button onClick={() => deletePost(post.id)} variant="danger" size="sm">DELETE</button>
</td>
</tr> ))}
)
)}
I am encountering an error in the second array.map function, and I'm not sure where I've gone wrong. Perhaps someone can assist me. Thank you.
A friend suggested that I add HTML tags, but this creates a new table instead of continuing from the initial thead section I created...
My desired outcome is to create a table like the following:
No | Name | Class 1 | Class 2 |
Category 1
1 | ItemA| 5 | 2 | (associated with category ID number 1)
2 | ItemB| 5 | 2 |
Category 2
3 | ItemC| 5 | 2 | (associated with category ID number 2)