NextJS, map, get first value · community · Discussion #200025 · GitHub
Skip to content
Discussion options

You must be logged in to vote

You probably do not want to render those header fields inside the map, because anything inside the map will repeat for every trip.

If the values are the same for all items, take the first trip before the return and render the header once:

const TripsList = ({ trips = [] }) => {
  const firstTrip = trips[0]

  if (!firstTrip) return null

  return (
    <>
      <div>{firstTrip.startDate}</div>
      <div>
        {firstTrip.from} - {firstTrip.to}
      </div>

      {trips.map((trip) => (
        <div key={trip.trip_id}>
          {trip.options?.map((option) => (
            <div key={option.id}>
              {option.name}
            </div>
          ))}
        </div>
      ))}
    </>
  

Replies: 2 comments 1 reply

Comment options

You must be logged in to vote
1 reply
@Fred638
Comment options

Answer selected by Fred638

This comment was marked as low quality.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Question Ask and answer questions about GitHub features and usage Programming Help Discussions around programming languages, open source and software development source:ui Discussions created via Community GitHub templates
3 participants