Styjun

I am using the react-event-timeline lib (here: https://www.npmjs.com/package/react-event-timeline) to create a timeline for one of my pages.

I create a list of events called: events and pass it to the timeline. The timeline consists of two parts the first is the initial event, when the page is created there is a timeline event at the top of each timeline to catch that. The second part is dynamically generated based on the list of events provided by the state of the page.

React throws this timeline error and based on debugging I think the issue is with the structure of the html below where The && checks are:

The error I get is:

React.cloneElement(...): The argument must be a React element, but you passed null.

The above error occurred in the component:
in Timeline (created by TimelineComponent)

<Timeline className=styles.timeline>
 (data) && (<TimelineEvent
 createdAt=Moment(data.creationDateTime).fromNow()
 icon=<ActionIcon variant='create' fontSize=18 />
 iconStyle=this.bubbleStyles('create').icon
 bubbleStyle=this.bubbleStyles('create').bubble
 subtitle=this.emptyContainer()
 contentStyle=contStyle
 title=this.creationTitle(data.user)/>)

// ^^^ the creation event
// vvv the dynamic part of the timeline. I map each element in events to a timelineEvent
 events && (events.map((event, index) => (
 <TimelineEvent
 key=index
 createdAt=Moment(event.creationDateTime).fromNow()
 icon=event.type && <ActionIcon variant=event.type fontSize=18 />
 iconStyle=event.type && this.bubbleStyles(event.type).icon
 bubbleStyle=event.type && this.bubbleStyles(event.type).bubble
 subtitle=this.emptyContainer()
 contentStyle=contStyle
 title=this.titleElement(event, index)>
 this.showInfoBox(event.type) &&
 (<div className=styles.infoBox>
 <div className=styles.infoBoxBody>
 this.getInfo(event.type)
 </div>
 </div>
 )
 <div className=styles.commentBox>
 event.comment
 </div>
 </TimelineEvent>
 )))
 </Timeline>

null && something resolves to null.

It looks like <Timeline> can't accept null as its props.children. Try to prepare events before rendering <Timeline>:

let allEvents = [];
if (data) allEvents.push(/*something*/)
if (events) 
 allEvents = allEvents.concat(events.map(/*something*/));

...
allEvents.length > 0 && (
 <Timeline>
 allEvents.map(event => <TimelineEvent/>)
 </Timeline>
)

Might be a bug https://github.com/rcdexta/react-event-timeline/blob/master/components/Timeline.js#L8

const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, orientation ))