react same keys pushed into a table row depending on user Id

So i’m getting my data from an API which returns this:

appointments: [0: {customerId: 1, customerName: john, serviceName: serviceName1, start: {dateTime:"15:00"}, end: {dateTime:"16:00"}},
1: {customerId: 2, customerName: doe, serviceName: serviceName2, start: {dateTime:"14:00"}, end: {dateTime:"15:00"}},
2: {customerId: 2, customerName: doe,serviceName: serviceName3 , start: {dateTime:"12:00"}, end: {dateTime:"13:00"}}]

my snippet of code

render() {
return (
  <div>
    <Table>
      <thead>
        <tr>
          <th scope="col">room</th>
          <th scope="col">customer name</th>
          <th scope="col">serviceName1</th>
          <th scope="col">serviceName 2</th>
          <th scope="col">serviceName 3</th>
          <th scope="col">other</th>
        </tr>
      </thead>
      <tbody>
        {this.state.appointments.map((appointments: any, index) => {
          return (
            <tr key={appointments.customerId}>
              <td>{index + 1}</td>
              <td>{appointments.customerName}</td>
              {}
              <td>{`${formatDateTime(
                appointments.start?.dateTime
              )} - ${formatDateTime(appointments.end?.dateTime)}`}</td>
            </tr>
          );
        })}
      </tbody>
    </Table>
  </div>

My question is how can i push depending on the customer Id his both services (serviceName 2, and serviceName 3) into the same row and each row fills in the appropraite header the time for each service?

enter image description here

enter image description here

22 thoughts on “react same keys pushed into a table row depending on user Id”

Leave a Comment