Incrementing numbers until a specific number with React

Question

I'm currently doing a calendar using React and I'm trying to make a simple function so I don't have to write each time (00:00 - 23:00).

How can I increment every div with the class name calendar-time so it does something like this?

<div className="wrapper">
            <div className="calendar-time">
                00:00
            </div>
            <div className="calendar-time">
                01:00
            </div>
            <div className="calendar-time">
                02:00
            </div>
            <div className="calendar-time">
                03:00
            </div>
        </div>

What I tried:

render() {
    for (let i = 0; i < 23; i++) {
        return(
            <div className="calendar-time">
                {i}:00
            </div>
        );
    }

    return(
        <div className="wrapper">

        </div>
    );
  }

JLai · Accepted Answer · 2019-12-11 16:16:20Z

1

{[...Array(24)].map((_, el) => (
    <div className="calendar-time" key={el}>
      {`${('0' + el).slice(-2)}:00`}
    </div>
))}

edited Dec 11, 2019 at 16:16

JLai

3701 silver badge8 bronze badges

answered Dec 11, 2019 at 16:06

demkovych

9,0553 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Develliot · Accepted Answer · 2019-12-11 16:27:47Z

0

You need make sure that your list of elements are rendered inside your wrapper element.

It is also a good idea to add a "key" attribute if you are mapping though a list and creating a list of elements as it helps react render stuff.

render() {
    // This is just an array of numbers [0,1,2...22,23]
    const hours = [...Array(23).keys()]

    return(
        <div className="wrapper">
           {hours.map((number) => (
                   <div key={`hour-${number}`} className="calendar-time">
                     {/* some string magic to make sure the the hour is always 2 digits long */}
                     {`${('0' + number).slice(-2)}:00`}
                   </div>
               );
           )}
        </div>
    );
}

edited Dec 11, 2019 at 16:27

answered Dec 11, 2019 at 16:22

Develliot

113 bronze badges

Comments

AGE · Accepted Answer · 2019-12-11 16:35:59Z

0

render() {
    let hours = "";

    for (let i = 0; i < 23; i++) {
        hours += `
            <div className="calendar-time">
                ${i}:00
            </div>
        `;
    }

    return (
        <div className="wrapper">
           {hours}
        </div>
    );
}

edited Dec 11, 2019 at 16:35

AGE

3,7873 gold badges43 silver badges63 bronze badges

answered Dec 11, 2019 at 16:07

Maxime Girou

1,5703 gold badges18 silver badges35 bronze badges

Collectives™ on Stack Overflow

Incrementing numbers until a specific number with React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related