Как создать массив кнопок с разными значениями?

Question

Всем доброго дня.Новичок в React. Как из этой копипасты превратить код в аккуратную функцию с использованием map в отдельной компоненте, чтобы это аккуратно отображалось в основной компоненте?

  <div className={styles.time}>
  <div className={styles.morning}>
    <p>Утро</p>
    <button time={this.state.time} onClick={this.onClick}>10:00</button>
    <button time={this.state.time} onClick={this.onClick}>10:30</button>
    <button time={this.state.time} onClick={this.onClick}>11:00</button>
    <button time={this.state.time} onClick={this.onClick}>11:30</button>
  </div>
  <div className={styles.day}>
    <p>День</p>
    <button time={this.state.time} onClick={this.onClick}>12:00</button>
    <button time={this.state.time} onClick={this.onClick}>12:30</button>
    <button time={this.state.time} onClick={this.onClick}>13:00</button>
    <button time={this.state.time} onClick={this.onClick}>13:30</button>
    <button time={this.state.time} onClick={this.onClick}>14:00</button>
    <button time={this.state.time} onClick={this.onClick}>14:30</button>
    <button time={this.state.time} onClick={this.onClick}>15:00</button>
    <button time={this.state.time} onClick={this.onClick}>15:30</button>
    <button time={this.state.time} onClick={this.onClick}>16:00</button>
    <button time={this.state.time} onClick={this.onClick}>16:30</button>
  </div>
  <div className={styles.evening}>
    <p>Вечер</p>
    <button time={this.state.time} onClick={this.onClick}>17:00</button>
    <button time={this.state.time} onClick={this.onClick}>17:30</button>
    <button time={this.state.time} onClick={this.onClick}>18:00</button>
    <button time={this.state.time} onClick={this.onClick}>18:30</button>
    <button time={this.state.time} onClick={this.onClick}>19:00</button>
    <button time={this.state.time} onClick={this.onClick}>19:30</button>
    <button time={this.state.time} onClick={this.onClick}>20:00</button>
  </div>
  </div>

Answer 1

Примерно так:

<div className={styles.morning}>
    <p>Утро</p>
    {this.state.times.morningTimes.map((time, i) => (
      <button key={i} value={time} onClick={this.onClick}>
        {time}
      </button> 
    ))}
</div>

Это, если времена хранить в виде массива строк, типа ['10:30', '11:00']. Если в виде массива дат, то тоже самое, но только форматируя даты.

БЛОГ НА HUSL

Как создать массив кнопок с разными значениями?

Ответы (1 шт):