Изменение состояния дочернего компонента по нажатию кнопки в react

Question

Пытаюсь по нажатию на кнопку ("leftbar__options") скрывать боковое меню ("AsideOptions"), которое является другим компонентом в реакте. Я передал пропсы, но состояние не меняется и меню остаётся на месте
Помогите найти ошибки и решение к ним. Заранее спасибо

Дочерний компонент

import './leftbar-usercard.scss';
import { Component } from 'react';
import AsideOptions from '../aside-options/aside-options';

class UserCard extends Component {
    constructor(props) {
        super(props)
        this.state = {
            display: ''
        }
    }
    openAsideOptions = () => {
        this.setState({display: "none"})
    }
    render() {
        const styled = { backgroundColor: this.state.display }
        return (
            <div className="">
                <div className="leftbar__user-card">
                    <div className="leftbar__user-ico"></div>
                    <div className="leftbar__current-info">
                        <div className="leftbar__user-name">Username</div>
                        <div className="leftbar__user-role">Role</div>
                    </div>
                    <div className="leftbar__options">
                    </div>
                </div>
                {/* <AsideOptions style={() => this.props.updateData(this.state.display)}></AsideOptions> */}
                <AsideOptions></AsideOptions>
            </div>
            
        )
    }
}

export default UserCard;

Родительский компонент

   import './aside-options.scss'
import {Component} from 'react'

class AsideOptions extends Component { 
    constructor(props) {
        super(props)
        this.updateDisplay = () => {
            this.setState = {
                display:"none"
            }
        }
    }

    render() {
        return (
            <div className="aside-options">
                <div className="aside-options__header">
                    <p>Options</p>
                </div>
                <div className="aside-options__audio"></div>
                <div className="aside-options__video"></div>
                <div className="aside-options__logout">
                    <p class="aside-options__logout-text">Logout</p>
                </div>
            </div>
        )
    }
}

export default AsideOptions;

Answer 1

class UserCard extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isShowAside: true,
        };
    }

    openAsideOptions() {
        this.setState(prev => ({ ...prev, isShowAside: !prev.isShowAside }));
    }

    render() {
        return (
            <div className="">
                <div className="leftbar__user-card">
                    <div className="leftbar__user-ico"></div>
                    <div className="leftbar__current-info">
                        <div className="leftbar__user-name">Username</div>
                        <div className="leftbar__user-role">Role</div>
                    </div>
                    <div className="leftbar__options" onClick={this.openAsideOptions}></div>
                </div>
                {this.state.isShowAside && <AsideOptions />}
            </div>
        );
    }
}

export default UserCard;

БЛОГ НА HUSL

Изменение состояния дочернего компонента по нажатию кнопки в react

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