Методы скрытия элементов веб-страниц

Вот из-за этого свойства столкнулся сегодня с неприятным моментом. У меня форма обратной связи выводилась в модальном окне, которое как раз отображалось и скрывалось с помощью transform: scale. Вот только хоть модального окна с формой и не было видно на экране, ссылка с рекапчи была полностью кликабельна и она находилась прямо над кнопкой мобильного меню. В итоге при клике по кнопке меню происходил переход на сайт гугла. Пришлось добавлять visability: hidden, что решило проблему.

Учебный курс по React, часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов

Спасибо за правило, буду знать. А как такой вариант?

    constructor() {
        super();
        this.state = {
            count: 0
        };
    }

    handleClick = () =>{
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    };


    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.handleClick}>Changed!</button>
            </div>
        )
    }

Подсмотрел отсюда stackoverflow

Учебный курс по React, часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов

Думаю лучше передавать контекст через замыкание:

render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={()=>this.handleClick()}>Change!</button>
            </div>
        )
}

Учебный курс по React, часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов

Из документации React:
this.setState является асинхронной функцией и поэтому несколько вызовов этой функции в одном цикле может привести к объединению этих вызовов. Например, если мы захотим увеличить количество товара на 1 больше одного раза за цикл, то получим следующий результат:
Object.assign(
previousState,
{quantity: state.quantity + 1},
{quantity: state.quantity + 1},
…
)
Последующий вызов this.setState в одном цикле будет перезаписывать предыдущий, поэтому количество товара будет увеличено только один раз. Если новое состояние зависит от предыдущего, то мы рекомендуем использовать вариант setState с вызовом функции:
this.setState((state) => {
return {quantity: state.quantity + 1};
});
Документация