0
votes

Comment limiter l'affichage de l'en-tête de tableau une fois dans la fonction de carte?

J'ai un magasin de données en état qui doit être affiché dans un format tabulaire dans l'interface utilisateur en utilisant React. J'utilise une fonction de carte pour afficher les données. Je suis en mesure d'afficher les données mais l'en-tête est affiché après chaque ligne car ils sont itérés dans une boucle.

Veuillez me faire savoir comment puis-je afficher la sortie au format tabulaire avec l'en-tête affiché une seule fois? P >

code de méthode de retour dans 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>
    );

Résultat attendu: - En-tête de tableau à afficher une seule fois suivi de toutes les lignes de données

reactjs html-table

0 commentaires

3 Réponses :

1
votes

Il vous suffit d'extraire l'en-tête de votre boucle:

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

4 commentaires

Le tableau s'affiche en fonction de l'événement Créer un itinéraire. Si j'extrait hors de la boucle, il sera visible sans événement. Veuillez aider.

il a résolu mais je vois la valeur par défaut 0 affichée. Comment puis-je le cacher?

@ aquinq - Le problème est résolu mais je vois une valeur factice comme 0 affichée

Ok alors peut-être que le ternaire n'était pas assez explicite, vous pouvez essayer avec cette nouvelle modification.

0
votes

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

0 commentaires

0
votes

Le problème avec votre code est que vous avez mis l'en-tête du tableau dans la boucle elle-même, ce qui est faux. Essayez quelque chose comme ceci:

{
    ( 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
}

0 commentaires