React treats Timeline element as null even with a condition checkHow to have conditional elements and keep DRY with Facebook React's JSX?React ignores 'for' attribute of the label elementReact – the right way to pass form element state to sibling/parent elements?Show or hide element in ReactConditional property in react/jsxReact Js look at items in array and check for nullReact - JSX conditional tagsReact treats “variable” syntax as an objectreact create element to JSXForce react to treat element as the same?
Multi tool use
How to safely destroy (a large quantity of) valid checks?
What aircraft was used as Air Force One for the flight between Southampton and Shannon?
Which languages would be most useful in Europe at the end of the 19th century?
Increase speed altering column on large table to NON NULL
Live action TV show where High school Kids go into the virtual world and have to clear levels
What would be the way to say "just saying" in German? (Not the literal translation)
Origin of "boor"
Why does ''cat "$1:-/dev/stdin | ... &>/dev/null'' work in bash but not dash?
Non-aqueous eyes?
If there's something that implicates the president why is there then a national security issue? (John Dowd)
Does putting salt first make it easier for attacker to bruteforce the hash?
Is it legal for a bar bouncer to confiscate a fake ID
Does the new finding on "reversing a quantum jump mid-flight" rule out any interpretations of QM?
Scientist couple raises alien baby
Is there a DSLR/mirorless camera with minimal options like a classic, simple SLR?
60s or 70s novel about Empire of Man making 1st contact with 1st discovered alien race
The Frozen Wastes
PDF vs. PNG figure: why does figure load so much faster even if file sizes are the same?
Why did Intel abandon unified CPU cache?
New bike, tubeless tire will not inflate
Why are MBA programs closing?
Someone whose aspirations exceed abilities or means
How can I make 12 tone and atonal melodies sound interesting?
How can I deal with uncomfortable silence from my partner?
React treats Timeline element as null even with a condition check
How to have conditional elements and keep DRY with Facebook React's JSX?React ignores 'for' attribute of the label elementReact – the right way to pass form element state to sibling/parent elements?Show or hide element in ReactConditional property in react/jsxReact Js look at items in array and check for nullReact - JSX conditional tagsReact treats “variable” syntax as an objectreact create element to JSXForce react to treat element as the same?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
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>
html reactjs jsx typescript-typings
add a comment |
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>
html reactjs jsx typescript-typings
add a comment |
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>
html reactjs jsx typescript-typings
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>
html reactjs jsx typescript-typings
html reactjs jsx typescript-typings
asked Mar 24 at 19:50
Haq.HHaq.H
13213
13213
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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 ))
This was the approach I ended up using. when I generate the events list I just add the creation event to it and sort them based on creationDateTime.
– Haq.H
Mar 24 at 20:59
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55327901%2freact-treats-timeline-element-as-null-even-with-a-condition-check%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 ))
This was the approach I ended up using. when I generate the events list I just add the creation event to it and sort them based on creationDateTime.
– Haq.H
Mar 24 at 20:59
add a comment |
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 ))
This was the approach I ended up using. when I generate the events list I just add the creation event to it and sort them based on creationDateTime.
– Haq.H
Mar 24 at 20:59
add a comment |
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 ))
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 ))
edited Mar 24 at 20:22
answered Mar 24 at 20:07
UjinT34UjinT34
2,1001316
2,1001316
This was the approach I ended up using. when I generate the events list I just add the creation event to it and sort them based on creationDateTime.
– Haq.H
Mar 24 at 20:59
add a comment |
This was the approach I ended up using. when I generate the events list I just add the creation event to it and sort them based on creationDateTime.
– Haq.H
Mar 24 at 20:59
This was the approach I ended up using. when I generate the events list I just add the creation event to it and sort them based on creationDateTime.
– Haq.H
Mar 24 at 20:59
This was the approach I ended up using. when I generate the events list I just add the creation event to it and sort them based on creationDateTime.
– Haq.H
Mar 24 at 20:59
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55327901%2freact-treats-timeline-element-as-null-even-with-a-condition-check%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
hdraY,2 IzaoTAclhwWd ausio0 jjpG,ji6 vuLoTsq6lH5Hdsx gA 87TPk8h,h,NkZQ8NX3FpqVkJOv5dbYQPG AXlWz8,sdDApa34wx