Using moment object in for loop

I am trying to loop over a date range to create a bootstrap header row of dates. Following is my code:-

renderHeader(){

    var dates = ;

    const start = "2018-11-10";

    const end = "2018-11-24";

    console.log('Trying to enter the loop');

    for(let date = moment(start); date.isSame(end); date.add(1,'d')){

        console.log(date.format("Do MMM YYYY"));

        console.log(date.isSame(end));

        dates.push(<Col>{date.format("Do MMM YYYY")}</Col>);

    }

    dates.push(<Row>{dates}</Row>);

    //dates.push(<Row><Col>Dummy</Col></Row>);

    return dates;

}

For some reason the control doesn't enter the loop and I get a message on the Chrome browser saying

Paused before potential out-of-memory crash

The browser console shows following output

enter image description here

If I remove the loop and enter some dummy data then everything works fine.

edited Nov 20 '18 at 23:50

asked Nov 20 '18 at 23:40

Parikshit

120129

add a comment |

I am trying to loop over a date range to create a bootstrap header row of dates. Following is my code:-

renderHeader(){

    var dates = ;

    const start = "2018-11-10";

    const end = "2018-11-24";

    console.log('Trying to enter the loop');

    for(let date = moment(start); date.isSame(end); date.add(1,'d')){

        console.log(date.format("Do MMM YYYY"));

        console.log(date.isSame(end));

        dates.push(<Col>{date.format("Do MMM YYYY")}</Col>);

    }

    dates.push(<Row>{dates}</Row>);

    //dates.push(<Row><Col>Dummy</Col></Row>);

    return dates;

}

For some reason the control doesn't enter the loop and I get a message on the Chrome browser saying

Paused before potential out-of-memory crash

The browser console shows following output

enter image description here

If I remove the loop and enter some dummy data then everything works fine.

edited Nov 20 '18 at 23:50

asked Nov 20 '18 at 23:40

Parikshit

120129

add a comment |

I am trying to loop over a date range to create a bootstrap header row of dates. Following is my code:-

renderHeader(){

    var dates = ;

    const start = "2018-11-10";

    const end = "2018-11-24";

    console.log('Trying to enter the loop');

    for(let date = moment(start); date.isSame(end); date.add(1,'d')){

        console.log(date.format("Do MMM YYYY"));

        console.log(date.isSame(end));

        dates.push(<Col>{date.format("Do MMM YYYY")}</Col>);

    }

    dates.push(<Row>{dates}</Row>);

    //dates.push(<Row><Col>Dummy</Col></Row>);

    return dates;

}

For some reason the control doesn't enter the loop and I get a message on the Chrome browser saying

Paused before potential out-of-memory crash

The browser console shows following output

enter image description here

If I remove the loop and enter some dummy data then everything works fine.

edited Nov 20 '18 at 23:50

asked Nov 20 '18 at 23:40

Parikshit

120129

I am trying to loop over a date range to create a bootstrap header row of dates. Following is my code:-

renderHeader(){

    var dates = ;

    const start = "2018-11-10";

    const end = "2018-11-24";

    console.log('Trying to enter the loop');

    for(let date = moment(start); date.isSame(end); date.add(1,'d')){

        console.log(date.format("Do MMM YYYY"));

        console.log(date.isSame(end));

        dates.push(<Col>{date.format("Do MMM YYYY")}</Col>);

    }

    dates.push(<Row>{dates}</Row>);

    //dates.push(<Row><Col>Dummy</Col></Row>);

    return dates;

}

For some reason the control doesn't enter the loop and I get a message on the Chrome browser saying

Paused before potential out-of-memory crash

The browser console shows following output

enter image description here

If I remove the loop and enter some dummy data then everything works fine.

javascript reactjs momentjs

edited Nov 20 '18 at 23:50

asked Nov 20 '18 at 23:40

Parikshit

120129

edited Nov 20 '18 at 23:50

asked Nov 20 '18 at 23:40

Parikshit

120129

edited Nov 20 '18 at 23:50

asked Nov 20 '18 at 23:40

Parikshit

120129

asked Nov 20 '18 at 23:40

Parikshit

120129

asked Nov 20 '18 at 23:40

Parikshit

120129

add a comment |

3 Answers
3

active

oldest

votes

I dont think you can use that as an iterator. Besides, it would be easier with a while loop.

var dates = ;

const start = moment("2018-11-10");

const end = moment("2018-11-24");



while(!start.isSame(end)) {

  dates.push(<Col>{start.format("Do MMM YYYY")}</Col>);

  start.add(1, 'day');

}



return dates;

Same principe as what you wanted to do. While is not the same date, push to the array and add a new day.

answered Nov 20 '18 at 23:44

yBrodsky

3,96111221

Thanks for the answer! Coming from Java background, I didn't understand why the for loop didn't work.

– Parikshit
Nov 21 '18 at 5:53

add a comment |

yBrodsky answered the main question but I just wanted to add that you also need to provide a key property to the component to provide a unique id - this will get rid of the other warning you are seeing. Probably could just use the date for this

while(!start.isSame(end)) {

   dates.push(<Col key={start.format("YYYY-MM-DD")}>{start.format("Do MMM YYYY")}</Col>);

   start.add(1, 'day');

}

edited Nov 20 '18 at 23:58

answered Nov 20 '18 at 23:52

Code Ranger

1847

add a comment |

When you are rendering a list of elements in a loop, you should add key prop to the element.

Change this line

dates.push(<Col>{date.format("Do MMM YYYY")}</Col>)

const formattedDate = date.format("Do MMM YYYY");

dates.push(<Col key={formattedDate}>{formattedDate}</Col>)

answered Nov 21 '18 at 0:13

Dinesh Pandiyan

2,6511927

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

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53403249%2fusing-moment-object-in-for-loop%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

I dont think you can use that as an iterator. Besides, it would be easier with a while loop.

var dates = ;

const start = moment("2018-11-10");

const end = moment("2018-11-24");



while(!start.isSame(end)) {

  dates.push(<Col>{start.format("Do MMM YYYY")}</Col>);

  start.add(1, 'day');

}



return dates;

Same principe as what you wanted to do. While is not the same date, push to the array and add a new day.

answered Nov 20 '18 at 23:44

yBrodsky

3,96111221

Thanks for the answer! Coming from Java background, I didn't understand why the for loop didn't work.

– Parikshit
Nov 21 '18 at 5:53

add a comment |

I dont think you can use that as an iterator. Besides, it would be easier with a while loop.

var dates = ;

const start = moment("2018-11-10");

const end = moment("2018-11-24");



while(!start.isSame(end)) {

  dates.push(<Col>{start.format("Do MMM YYYY")}</Col>);

  start.add(1, 'day');

}



return dates;

Same principe as what you wanted to do. While is not the same date, push to the array and add a new day.

answered Nov 20 '18 at 23:44

yBrodsky

3,96111221

Thanks for the answer! Coming from Java background, I didn't understand why the for loop didn't work.

– Parikshit
Nov 21 '18 at 5:53

add a comment |

I dont think you can use that as an iterator. Besides, it would be easier with a while loop.

var dates = ;

const start = moment("2018-11-10");

const end = moment("2018-11-24");



while(!start.isSame(end)) {

  dates.push(<Col>{start.format("Do MMM YYYY")}</Col>);

  start.add(1, 'day');

}



return dates;

Same principe as what you wanted to do. While is not the same date, push to the array and add a new day.

answered Nov 20 '18 at 23:44

yBrodsky

3,96111221

I dont think you can use that as an iterator. Besides, it would be easier with a while loop.

var dates = ;

const start = moment("2018-11-10");

const end = moment("2018-11-24");



while(!start.isSame(end)) {

  dates.push(<Col>{start.format("Do MMM YYYY")}</Col>);

  start.add(1, 'day');

}



return dates;

Same principe as what you wanted to do. While is not the same date, push to the array and add a new day.

answered Nov 20 '18 at 23:44

yBrodsky

3,96111221

answered Nov 20 '18 at 23:44

yBrodsky

3,96111221

answered Nov 20 '18 at 23:44

yBrodsky

3,96111221

answered Nov 20 '18 at 23:44

yBrodsky

3,96111221

Thanks for the answer! Coming from Java background, I didn't understand why the for loop didn't work.

– Parikshit
Nov 21 '18 at 5:53

add a comment |

Thanks for the answer! Coming from Java background, I didn't understand why the for loop didn't work.

– Parikshit
Nov 21 '18 at 5:53

Thanks for the answer! Coming from Java background, I didn't understand why the for loop didn't work.

– Parikshit
Nov 21 '18 at 5:53

add a comment |

while(!start.isSame(end)) {

   dates.push(<Col key={start.format("YYYY-MM-DD")}>{start.format("Do MMM YYYY")}</Col>);

   start.add(1, 'day');

}

edited Nov 20 '18 at 23:58

answered Nov 20 '18 at 23:52

Code Ranger

1847

add a comment |

while(!start.isSame(end)) {

   dates.push(<Col key={start.format("YYYY-MM-DD")}>{start.format("Do MMM YYYY")}</Col>);

   start.add(1, 'day');

}

edited Nov 20 '18 at 23:58

answered Nov 20 '18 at 23:52

Code Ranger

1847

add a comment |

while(!start.isSame(end)) {

   dates.push(<Col key={start.format("YYYY-MM-DD")}>{start.format("Do MMM YYYY")}</Col>);

   start.add(1, 'day');

}

edited Nov 20 '18 at 23:58

answered Nov 20 '18 at 23:52

Code Ranger

1847

while(!start.isSame(end)) {

   dates.push(<Col key={start.format("YYYY-MM-DD")}>{start.format("Do MMM YYYY")}</Col>);

   start.add(1, 'day');

}

edited Nov 20 '18 at 23:58

answered Nov 20 '18 at 23:52

Code Ranger

1847

edited Nov 20 '18 at 23:58

answered Nov 20 '18 at 23:52

Code Ranger

1847

answered Nov 20 '18 at 23:52

Code Ranger

1847

answered Nov 20 '18 at 23:52

Code Ranger

1847

add a comment |

When you are rendering a list of elements in a loop, you should add key prop to the element.

Change this line

dates.push(<Col>{date.format("Do MMM YYYY")}</Col>)

const formattedDate = date.format("Do MMM YYYY");

dates.push(<Col key={formattedDate}>{formattedDate}</Col>)

answered Nov 21 '18 at 0:13

Dinesh Pandiyan

2,6511927

add a comment |

When you are rendering a list of elements in a loop, you should add key prop to the element.

Change this line

dates.push(<Col>{date.format("Do MMM YYYY")}</Col>)

const formattedDate = date.format("Do MMM YYYY");

dates.push(<Col key={formattedDate}>{formattedDate}</Col>)

answered Nov 21 '18 at 0:13

Dinesh Pandiyan

2,6511927

add a comment |

When you are rendering a list of elements in a loop, you should add key prop to the element.

Change this line

dates.push(<Col>{date.format("Do MMM YYYY")}</Col>)

const formattedDate = date.format("Do MMM YYYY");

dates.push(<Col key={formattedDate}>{formattedDate}</Col>)

answered Nov 21 '18 at 0:13

Dinesh Pandiyan

2,6511927

When you are rendering a list of elements in a loop, you should add key prop to the element.

Change this line

dates.push(<Col>{date.format("Do MMM YYYY")}</Col>)

const formattedDate = date.format("Do MMM YYYY");

dates.push(<Col key={formattedDate}>{formattedDate}</Col>)

answered Nov 21 '18 at 0:13

Dinesh Pandiyan

2,6511927

answered Nov 21 '18 at 0:13

Dinesh Pandiyan

2,6511927

answered Nov 21 '18 at 0:13

Dinesh Pandiyan

2,6511927

answered Nov 21 '18 at 0:13

Dinesh Pandiyan

2,6511927

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk