Где ошибки в коде?

Question

[ThomasScott]

class MyComponent extends React.component {
    constructor() {
        this.state = {
            counter: 0,
            items: [1, 2]
        };
    }

    increase(this) {
        this.state.counter++;
    }

    addItem() {
        this.state.items = this.state.items.push(this.state.items.length+1);
    }

    render() {
        <div class="data">
            <div>{this.state.counter}</div>
            <ul>
            {this.state.items.map(item => (
                <li key={item}>element {item}</li>
            ))}
            </ul>
        </div>
        <div class="actions">
            <button type="button" onclick={this.increase}>zwiększ</button>
            <button type="button" onclick={this.addItem}>dodaj</button>
        </div>
    }
}

ReactDOM.render(<MyComponent>, document.querySelector("body"));

Comments

[0xD34F]

Что можно понять из вашего кода:

1. Документацию react'а вы не читали.
2. JS вы не знаете.
3. Вы вообще не программист, никаким боком.

Может, притормозите чутка, и начнёте с основ?

[Alex]

1. Сформулируйте свою проблему в формате «Объект – отклонение». Плохой пример: СРОЧНО! ВСЁ СЛОМАЛОСЬ И РАБОТАЕТ НЕ ТАК. Хороший пример: XFree86 4.1 курсор мыши на чипсете Fooware MV1005 – неправильная форма.
   
2. Постарайтесь уместить суть проблемы в первых 50 знаках, если пишете сообщение; в первых двух предложениях, если озвучиваете проблему устно. Ваше время и время собеседника дорого, используйте его с умом.
   
3. Далее добавьте контекста и опишите более широкую картину, как вы вообще попали в такую ситуацию, насколько велики масштабы трагедии.
   
4. Если вы придумали решение, расскажите немного о том, почему вы считаете, что это поможет.
   
5. Если вам в ответ задали много уточняющих вопросов – радуйтесь и отвечайте, это пойдёт вам на благо и поможет найти для вас подходящее решение.
   
6. Описывайте симптомы проблемы в хронологическом порядке. XY-проблемы – это тот случай, когда перемена мест слагаемых имеет значение.
   
7. Опишите всё, что вы уже сделали для решения проблемы. Не забудьте рассказать, почему тот или иной вариант действий не сработал. Это даст окружающим дополнительную информацию о вашей проблеме и сократит время поиска решения.
   
   

[Алексей Джо]

Мб это домашнее задание или что-то подобное?

Answer 1

[Алексей Джо]

здесь:

constructor() {
        this.state = {
            counter: 0,
            items: [1, 2]
        };
    }

    increase(this) {
        this.state.counter++;
    }

    addItem() {
        this.state.items = this.state.items.push(this.state.items.length+1);
    }

Там где конструктор нужен super(props);

Answer 2

[Narts]

this.state.counter++;
Так делать нельзя, как и

this.state.items = this.state.items.push(this.state.items.length+1);

Вы уходите от одной из основных реакт концепций - иммутабельности.

Правильно делать так:
this.setState({counter: this.state.counter+1});
и

this.setState({items: ...this.state.items, this.state.items.length+1});

или через concat

Так же верно подметили на счет super(props);
Вы используете классовые компоненты и надо вызывать конструктор родительского класса

Comments

[Narts]

Ну и

ReactDOM.render(<MyComponent>, document.querySelector("body"));

тоже не "по канону".

Принято вешать не на body а на #root