Куда пропадают некоторые state параметры?

Question

[Иван]

Пишу компонент - нотификатор аля Youtube или Facebook. Т.е. должно гореть количество новостей (если они есть).

import React, {Component} from 'react';

import FaBell from 'react-icons/lib/fa/bell';

import './style.css';

export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
            eventsList: false
        };
    }
    getCount = () => {
        let counter = 0;
        this.props.actions.forEach((action, index) => {
            if (action.unread)
                counter++;
            }
        , counter);
        this.state = {
            "counter": counter
        }; // не пересчитывать
        return counter;
    }

    Debug = () => {
        console.log(this.state);
    }

    render() {
        return (
            <div onClick={this.Debug}>
                <h2><FaBell/></h2>
                {this.getCount() > 0 && <span>{this.state.counter}</span>}
                <div className="events-list opened">
                    <p>Event</p>
                    <p>Event</p>
                    <p>Event</p>
                    <p>Event</p>
                </div>
            </div>
        )
    }
}

Собственно вопрос: почему при клике на компоненте и срабатывании функции Debug(), у меня выводится стейт Object {counter: 3}
Где собственно параметр eventsList?
Собственно хочу сделать, чтоб у списка появлялся или пропадал класс opened при клике.

Comments

[Aves]

var a = {x: 1, y: 2};
a = {x: 2};
console.log(a) // {x: 2} ...куда же делся y?

[Иван]

Aves: мда, лопата ... Спасибо!

Answer 1

[Anton Bobylev]

Так вы же стейт явно переписываете без второго свойства:

this.state = {
            "counter": counter
        }; // не пересчитывать

Answer 2

[AlexChebanenko]

Изменяйте state только методом this.setState(), в противном случае нарушается задумка авторов React.