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
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;








0















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>









share|improve this question




























    0















    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>









    share|improve this question
























      0












      0








      0








      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>









      share|improve this question














      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Mar 24 at 19:50









      Haq.HHaq.H

      13213




      13213






















          1 Answer
          1






          active

          oldest

          votes


















          1














          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 ))





          share|improve this answer

























          • 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











          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
          );



          );













          draft saved

          draft discarded


















          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









          1














          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 ))





          share|improve this answer

























          • 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















          1














          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 ))





          share|improve this answer

























          • 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













          1












          1








          1







          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 ))





          share|improve this answer















          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 ))






          share|improve this answer














          share|improve this answer



          share|improve this answer








          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

















          • 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



















          draft saved

          draft discarded
















































          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.




          draft saved


          draft discarded














          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





















































          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
          IAVP7S1UYPgeNF,4oe4qILYDASE T16,k2t6gCm MwhukQjrtuyUZAwH1LfBWmSokQkFh

          Popular posts from this blog

          Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

          SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

          은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현