How to reuse same button with same value but different ID HTML, ReactJS-CodePudding

I'm doing a laundry system where the same timeslots repeat each day, i would like the timeslots to have different ID's to cross reference with the database, is it possible to do this without declaring a new button with new ID each time?

 return (
<table id="table">
  <thead>{renderTableHeader()}</thead>
  <tbody>
    <tr>
      <td>
        <button id="1">07:00-08:30</button>
      </td>
      <td>
        <button id="2">07:00-08:30</button> // this need to be repeated 7 times
      </td>
      <td>
        <button id="3">07:00-08:30</button>
      </td>
    </tr>
    <tr>
      <td>
        <button id='8'>08:30-10:00</button> //new row whith same functionality
      </td>
    </tr>
  </tbody>
</table>

);

CodePudding user response：

Something similar to this CodeSandbox

CodePudding user response：

Why not just put it in a loop?