How to restrict Table Header to display once in map function?

Question

I have a data store in state which needs to be displayed in a tabular format in UI using React. 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?

return method code in React:-

return (
      <div>
        <br />
        <input
          type="submit"
          class="btn btn-info btn-sm"
          value="Create Itinerary"
          onClick={this.callItinAPI}
        />
        <br />
        <br />

        {this.state.ItinData.map((item) => (
          <div>
            <table id="DisplayRequest">
              <tr>
                <th>TripName</th>
                <th>Booking ID</th>
                <th>Start Date</th>
                <th>End Date</th>
              </tr>

              <tr>
                <td>{item.Itinerary.TripName._text}</td>
                <td>{item.Itinerary.Bookings.Booking.RecordLocator._text}</td>
                <td>{item.Itinerary.StartDateLocal._text}</td>
                <td>{item.Itinerary.EndDateLocal._text}</td>
              </tr>
            </table>
          </div>
        ))}
      </div>
    );

Expected output:- Table header to displayed only once followed by all the data rows

aquinq · Accepted Answer · 2020-06-26 08:34:40Z

1

You just need to extract the header from your loop :

<div>
  {this.state.ItinData.length > 0 ? (
    <table id={'DisplayRequest'}>
      <tr>
        <th>TripName</th>
        <th>Booking ID</th>
        <th>Start Date</th>
        <th>End Date</th>
      </tr>
      {this.state.ItinData.map((item) => (
        <tr>
          <td>{item.Itinerary.TripName._text}</td>
          <td>{item.Itinerary.Bookings.Booking.RecordLocator._text}</td>
          <td>{item.Itinerary.StartDateLocal._text}</td>
          <td>{item.Itinerary.EndDateLocal._text}</td>
        </tr>
      ))}
    </table>;
  ) : null}
</div>

edited Jun 26, 2020 at 8:34

answered Jun 24, 2020 at 7:36

aquinq

1,4589 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ammy Over a year ago

The table is displayed based on Create Itinerary event. If i extract out of loop, it will be visible without event. Please assist.

ammy Over a year ago

it solved but i see default 0 being displayed. How can i hide it?

ammy Over a year ago

@aquinq- The issue is resolved but i see dummy value as 0 being displayed

aquinq Over a year ago

Ok so maybe the ternary was not explicit enough, you can try with this new edit.

Anh Tuan · Accepted Answer · 2020-06-24 07:37:06Z

return (
    <div>
      <br />
      <input
        type="submit"
        class="btn btn-info btn-sm"
        value="Create Itinerary"
        onClick={this.callItinAPI}
      />
      <br />
      <br />
        <div>
          <table id="DisplayRequest">
            <tr>
              <th>TripName</th>
              <th>Booking ID</th>
              <th>Start Date</th>
              <th>End Date</th>
            </tr>
            {this.state.ItinData.map((item) => (

              <tr>
                <td>{item.Itinerary.TripName._text}</td>
                <td>{item.Itinerary.Bookings.Booking.RecordLocator._text}</td>
                <td>{item.Itinerary.StartDateLocal._text}</td>
                <td>{item.Itinerary.EndDateLocal._text}</td>
              </tr>
            ))}
          </table>
        </div>
    </div>
  );

just move that td out side the loop

Mayank Pandeyz · Accepted Answer · 2020-06-26 09:00:52Z

The issue with your code is, you have put the table header in the loop itself which is wrong. Try something like this:

{
    ( this.state.ItinData.length > 0 )  // conditional rendering if data exist
    ?
    <table id={'DisplayRequest'}>
        <tr>
            <th>TripName</th>
            <th>Booking ID</th>
            <th>Start Date</th>
            <th>End Date</th>
        </tr>
        // Use the map() function to iterate the array and display the table body here
        {this.state.ItinData.map((item) => (
        <tr>
          <td>{item.Itinerary.TripName._text}</td>
          <td>{item.Itinerary.Bookings.Booking.RecordLocator._text}</td>
          <td>{item.Itinerary.StartDateLocal._text}</td>
          <td>{item.Itinerary.EndDateLocal._text}</td>
        </tr>
      ))}
    </table>
    null
}

Collectives™ on Stack Overflow

How to restrict Table Header to display once in map function?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related