Блог

Я кодировал простой список задач, добавив в него событие добавления. Логика кажется без проблем, но она не работает и работает только при возникновении ошибки:

сервер разработки отключен

Ниже приведен мой код:

 componentDidMount() {
    this.addEvent = () => {
        let newEvent = document.getElementById('newEvent').value
        let countBeforeAdd = this.state.itemsReversed.length
        this.state.itemsReversed.push(
            {
                id: countBeforeAdd   1,
                event: newEvent,
                dueTime: '',
                completed: false
            }
        )
        console.log(this.state.itemsReversed)
    }
}

render() {
    return (
        <main className='mainContent'>
            <form className='toDoListForm' action=''>
                <div className='divAdd'>
                    <input type='text' id='newEvent' name='newEvent' />
                    <button type='button' className='btnAdd' onClick={this.addEvent}>Add</button><br />
                </div>

                {this.state.itemsReversed.map((e, i) => (
                    <div className='divEvent' key={i}>
                        <label className='toDoList_label'>
                            <input className='toDoList_checkbox' type='checkbox' id={'item'   i   1} name={'item'   i   1} value={i   1} onChange={this.handleRemainingCount} /> <span>{e.event}</span>
                        </label><br />
                    </div>
                )
                )}
            </form>
        </main>
    )
}
  

Изображения, когда это работает

когда он не работает: