{{ message }}
NextJS, map, get first value #200025
Answered
by
LeonFXD200
Fred638
asked this question in
Programming Help
-
Beta Was this translation helpful? Give feedback.
Answered by
LeonFXD200
Jun 24, 2026
Replies: 2 comments 1 reply
-
|
You probably do not want to render those header fields inside the 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>
))}
</>
)
} |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
Fred638
This comment was marked as low quality.
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

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: