groupRenderer does not work correctly

[shalawfatah]

Describe the bug
I try to give some style to my group elements with a custom component (name, picture, etc), however, it does not seem to work correctly.

1. I create a template for the group:

function GroupItem ({person}) {
  return (
      <div className="flex items-center">
        <img  className="tip h-10 w-10 rounded p-2" src={person.picture} alt={person.title} />
        <span className="title">{person.title}</span>
      </div>
  )
}

2. Then I put the groups in place:

<Timeline
              groups={employees}
              groupRenderer={() => <GroupItem person={employees} />)}

In the scenario above, nothing is shown, the data is not fetched correctly because person is an array instead of an object. So I try to loop through it in the scenario below:

3. I try this way, where I loop through the group, but it only repeats the first item in the array:

groupRenderer={() => employees.map(i => <GroupItem item={i} />)}

What is the solution? Do I do something wrong?

Expected behavior
The entire group should be shown on the timeline left side bar.

Library Version
"react-calendar-timeline": "^0.28.0"

Desktop (please complete the following information):

• OS: [macOS Ventura]
• Browser [Chrome]
• Version [Version 108.0.5359.124 (Official Build) (arm64)]

Additional context
I use NextJS:
"next": "13.1.6",
"react": "18.2.0",

[shalawfatah]

I solved this issue, if anyone wants to see how, this is the code:

Custom renderer component (this works whether you want to render a custom item component or a group component)

const CustomGroupRenderer = ({group}) => {
    return (
      <div className="flex items-center justify-between">
        <img className="rounded shadow" src={group.picture} alt={group.title} height={'40px'} width={'40px'} />
        <p className="mx-2 font-bold">{group.title}</p>
      </div>
    );
  }

  export default CustomGroupRenderer;

Then just use it like this:

                            <Timeline
                              groups={filtered_employees}
                              groupRenderer={CustomGroupRenderer}
                              items={new_orders}
                              itemRenderer={CustomItemRenderer} 
                              />

[lnagel]

Triage Review (0.30.0-beta.9)

Status: Not a bug — resolved by the reporter ✅

The reporter solved their own issue in the comments. The original problem was a misunderstanding of the groupRenderer API — they were passing the entire employees array to each group instead of using the group prop provided by the renderer callback.

The correct usage (as the reporter discovered):

groupRenderer={({ group }) => <CustomGroupRenderer group={group} />}

The groupRenderer receives the individual group object for each row, not the entire groups array.

This is a usage question, not a library bug. The API works as designed in both 0.28 and 0.30. This issue can be closed.