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

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>
)}