Не отображается компонент на странице React

Question

Таймер:

В инпуты вписываю время и через кнопку добавляю объект со временем в useState массив обьъектов

HTML:

<span>Часы</span>
<input type='text' placeholder='0' id='hours'></input>
<span>Минуты</span>
<input type='text' placeholder='0' id='minutes'></input>
<span>Секунды</span>
<input type='text' placeholder='0' id='seconds'></input>

<button onClick={() => addTimerFunc()}>
    Добавить
</button>

JS:

  const [timers, updateTimers] = React.useState([])

  const addTimerFunc = () => {
    const newTimer = {
      hours: document.querySelector('#hours').value,
      minutes: document.querySelector('#minutes').value,
      seconds: document.querySelector('#seconds').value,
    }

    updateTimers([...timers, newTimer])
  }

Но при попытке с помощью .map добавить новый компонент с пропсами данных он не отображается на странице и ошибки никакой нет. В чем может быть проблема?

   {
      timers.map((timer) => {
        <Timer 
          hours={timer.hours} 
          minutes={timer.minutes} 
          seconds={timer.seconds}
        />
      })
    }

Вид компонента Timer:

Answer 1

в части с .map нужно было либо добавить return, либо поменять на круглые скобки:

{
  timers.map((timer) => (
    <Timer 
     hours={timer.hours} 
     minutes={timer.minutes} 
     seconds={timer.seconds}
     />
  ))
}

БЛОГ НА HUSL

Не отображается компонент на странице React

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