Timeline doesn't update when adding custom components dynamically

[PedroSilva8]

Describe the bug When changing custom content dynamically the timeline doesn't updating causing the new content not to show

Example Code

Update Code this.setState({timelineItems: val});

Render Code

                            <Chrono mode='VERTICAL_ALTERNATING' hideControls={true} allowDynamicUpdate={true} scrollable={false} useReadMore={false} theme={{
                                primary: ThemeHandler.Secondary(),
                                secondary: ThemeHandler.Content('surf'),
                                titleColor: ThemeHandler.Font(),
                                cardBgColor: ThemeHandler.Content(),
                                textColor: ThemeHandler.Font(),
                                cardForeColor: ThemeHandler.Font()
                            }}>
                                { this.state.timelineItems.map((val, index) => { 
                                    return <div key={index}><h2>{val.cardTitle}</h2></div>
                                })}
                            </Chrono>

Expected behavior When changing the state the timeline should update it's content and display the custom cards

Temporary hack Create a state with an array with a single empty object of time TimelineItemModel[] Set Chrono items to the state mentioned above When updating the custom content also update the items state to be an empty array

this.state = { timelineItems: [], itemUpdateHack: [ {}] }

this.setState({timelineItems: val, itemUpdateHack: []});

<Chrono mode='VERTICAL_ALTERNATING' items={this.state.itemUpdateHack} hideControls={true} allowDynamicUpdate={true} scrollable={false} useReadMore={false} theme={{
                                primary: ThemeHandler.Secondary(),
                                secondary: ThemeHandler.Content('surf'),
                                titleColor: ThemeHandler.Font(),
                                cardBgColor: ThemeHandler.Content(),
                                textColor: ThemeHandler.Font(),
                                cardForeColor: ThemeHandler.Font()
                            }}>
                                { this.state.timelineItems.map((val, index) => { 
                                    return <div key={index}><h2>{val.cardTitle}</h2></div>
                                })}
                            </Chrono>

[github-actions[bot]]

Hey there! Welcome to react-chrono

[midnightmastermind]

Is there going to be a fix for this coming? Idk if its me or not but updating the timeline dynamically fucks everything up. I filter out events and when I add them back in, its like adding extra events in. I'm including my events in both the items prop and as dom children. I tried the hack above and it hasnt been working.

[midnightmastermind]

Any help would be appreciated, I fully admit it could be on my end but Ive seen a couple of issues with the timeline fucking up dynamically.

[midnightmastermind]

Thanks @prabhuignoto, awesome component by the way :)

[prabhuignoto]

@midnightmastermind how are you updating the component state? do you have some code to share?

[midnightmastermind]

https://github.com/midnightmastermind/Jpoms-site/blob/master/front-end/src/components/HistoryPage.js

Pretty much I pull events from the props and display the timeline. I have a seperate component, filter down the array of events from state. Each time I uncheck a checkbox, it filters out the events from props, and replaces the events array in the state. That all works. The problem is, when I add the events back in. Suddenly, its duplicating events. Example: http://jpoms.com/history