How to make table header display once in map function in React JS? - reactjs

Question

I'm displaying data in a tabular format in UI using React and TailwindCSS. I am using a map function to display the data. I am able to display the data but the header is being displayed after each row as they are iterated in a loop.
Please let me know how can I display the output in tabular format with header being displayed only once?
React JS code:
{data && toggle ? (
<div className="table-container">
{data.map((project, idx) => {
return (
<>
<div className="overflow-x-none flex items-center justify-center w-fit mx-auto border border-[#1B71E8]">
<table className="table-fixed max-w-screen-lg border-seperate border-spacing">
<thead>
<tr>
<th>name</th>
<th>country</th>
<th>carbon credits</th>
<th>type</th>
<th>vintage</th>
<th>serial number</th>
</tr>
</thead>
<tbody>
<tr>
<td className="w-52 h-8 text-center">
{project.project.name}
</td>
<td className="w-52 text-center">
{project.project.country}
</td>
<td className="w-32 max-h-2 text-center">
{project.number_of_credits}
</td>
<td className="w-52 text-center">
{project.project.type}
</td>
<td className="w-52 text-center">
{project.vintage}
</td>
<td className="w-52 text-center">
{project.serial_number}
</td>
</tr>
</tbody>
</table>
</div>
</>
);
})}
</div>
table
Can you please help.

Answer 1

Move the element outside of the {data.map(...)} loop. You can also move the element outside of the loop and use the map function to generate the rows inside of it:
{data && toggle ? (
<div className="table-container">
<div className="overflow-x-none flex items-center justify-center w-fit mx-auto border border-[#1B71E8]">
<table className="table-fixed max-w-screen-lg border-seperate border-spacing">
<thead>
<tr>
<th>name</th>
<th>country</th>
<th>carbon credits</th>
<th>type</th>
<th>vintage</th>
<th>serial number</th>
</tr>
</thead>
<tbody>
{data.map((project, idx) => {
return (
<tr>
<td className="w-52 h-8 text-center">
{project.project.name}
</td>
<td className="w-52 text-center">
{project.project.country}
</td>
<td className="w-32 max-h-2 text-center">
{project.number_of_credits}
</td>
<td className="w-52 text-center">
{project.project.type}
</td>
<td className="w-52 text-center">
{project.vintage}
</td>
<td className="w-52 text-center">
{project.serial_number}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
)}