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