NextJS, map, show data based on an identifier

[Fred638]

🏷️ Discussion Type

Question

Body

Is it possible to render separate sections on a page based on an identifier not a key? I know that the key must be unique and that's ok, but I need to show different details in each section.

Guidelines

• I have read and understood this category's guidelines before making this post.

[kaungzawhein543]

Yes, this is standard practice.The key property is strictly for Next.js/React's internal rendering optimization, whereas your custom identifier handles the business logic.To achieve this, assign a unique value (like an ID) to the key property, and pass your specific layout identifier as a separate custom property. You can then use conditional logic (switch/if) or a component lookup map inside your loop to dynamically render different data and UI sections based on that identifier.

[Fred638]

I understand. Do you have an example and/or link to an example? Is this similar to parallel routes?

[kaungzawhein543]

To be completely transparent, I used AI to generate a quick code example for you so it’s easy to visualize:

const components = {
  profile: ProfileSection,
  analytics: AnalyticsSection,
};

// Inside your loop:
{sections.map((item) => {
  const Component = components[item.type];
  return (
    <div key={item.id}>
      {Component && <Component data="{item.content}"/>}
    </div>
  );
})}

Regarding Parallel Routes, they serve a different purpose.
Parallel Routes is a Next.js feature designed for architecture at the routing level—allowing you to render independent views (like a sidebar and a feed) simultaneously with separate loading states.
Your approach is simply standard runtime component swapping based on local data within a single view, which is much lighter and exactly what you need here.

[Fred638]

Thanks a lot! I'll try the example. Will get back to you later.

[Syaptiyan]

For filtering data based on an identifier in NextJS, here are a few approaches:

1. Using Array.filter():

const filteredData = data.filter(item => item.id === identifier)

2. Using Array.find() for single item:

const item = data.find(item => item.id === identifier)

3. Using useMemo for performance:

const filteredData = useMemo(() => {
  return data.filter(item => item.id === identifier)
}, [data, identifier])

4. If using API routes:

// pages/api/items/[id].js
const { id } = req.query
const item = await fetchItem(id)

Could you share more details about your data structure? That would help give a more specific solution.

[Fred638]

Thanks! Its actually more complicated to put all the components, logic etc. together. Let's take a bus trip management system as an example.

System Requirements (Frontend):

• Search form with a lot of filters (one-way, roundtrip, no. of passengers, travel dates, fare options etc.)
• Results page for showing all the available trips for a given route on given dates, no. of seats left, fare options etc.
• Outbound and return trips must be shown separately..

Basically each route has a unique ID (Key), but also an identifier (i.e. O = outbound trip, R = return trip).

Anyone care to respond?

[deepakraog]

For the bus trip case specifically — since you've got a route ID plus a direction flag (O/R), I'd group by both rather than trying to do it all in one .map().

const outbound = trips.filter(t => t.direction === 'O');
const returnTrips = trips.filter(t => t.direction === 'R');

Then render two sections, each mapping its own array, with key={trip.id} on the list item (key is just for React's diffing) and direction used purely for your UI logic (which section it lands in, which label/icon to show, etc.). If a route can have several trips per direction (different times), group again by route ID inside each list:

const byRoute = outbound.reduce((acc, t) => {
  (acc[t.routeId] ??= []).push(t);
  return acc;
}, {});

That gives you { routeId: [trip, trip, ...] } per direction, which maps cleanly onto "one card per route, showing all available times." Keeps the filtering logic out of your JSX entirely — you do the grouping once (probably in a useMemo if trips is large or comes from an API), and the render just walks the already-grouped data.

[Fred638]

Thanks for the explanation! This gives me the basic idea how to proceed.