estoy creando una aplicación para agendar citas y tengo una tabla con las horas disponibles, mi pregunta es, como puedo hacer para que el usuario pinche sobre la hora que desea y este valor se guarde en una variable? Estoy ocupando React y TailwindCSS para realizar este proyecto. Esta es mi tabla:
y este es el código que tengo hasta ahora de la tabla:
<div className='w-fit h-fit shadow-md rounded-lg'>
<table className="bg-white border-2 border-slate-300">
<thead>
<tr>
<th className='p-2 border-x-2 border-slate-300'>Hoy</th>
<th className='p-2 border-x-2 border-slate-300'>Mañana</th>
<th className='p-2 border-x-2 border-slate-300'>proximo dia</th>
<th className='p-2 border-x-2 border-slate-300'>proximo dia</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00</td>
<td>9:00</td>
<td>9:00</td>
<td>9:00</td>
</tr>
<tr>
<td>10:00</td>
<td>10:00</td>
<td>10:00</td>
<td>10:00</td>
</tr>
<tr>
<td>11:00</td>
<td>11:00</td>
<td>11:00</td>
<td>11:00</td>
</tr>
<tr>
<td>12:00</td>
<td>12:00</td>
<td>12:00</td>
<td>12:00</td>
</tr>
<tr>
<td>13:00</td>
<td>13:00</td>
<td>13:00</td>
<td>13:00</td>
</tr>
<tr>
<td>14:00</td>
<td>14:00</td>
<td>14:00</td>
<td>14:00</td>
</tr>
</tbody>
</table>
</div>