Reactstrap dropdownitem not triggering setState

Question

What is happening?

Hello, I'm just using reactstrap and react js for a bit and i have some issues regarding the component. I want to trigger show modal when i click on the component inside the component. this is the module that i've been working for a while:

What should be happening?

I expect it to trigger setState when i click the div inside DropdownItem

// Base Account placeholder component <PARENT>
export class Account extends React.Component {
    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
            dropDownOpen : false
        };
    }

    toggle() {
        this.setState({
            dropDownOpen : !this.state.dropDownOpen
        });
    }

    render() {
        return (
            <Dropdown isOpen={this.state.dropDownOpen} toggle={this.toggle}>
                <DropdownToggle nav caret>
                    Account
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem>
                        <div onClick={() => console.log("fire pew pew")}>
                        <AccountSettingModal />
                    </div>
                    </DropdownItem>
                    <DropdownItem>
                        Pricings
                    </DropdownItem>
                    <DropdownItem divider />
                    <DropdownItem>
                        Logout
                    </DropdownItem>
                </DropdownMenu>
        </Dropdown>
    );
}

}

this is the modal that i want to show:

// Base account placeholder for Modal Setting
class AccountSettingModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modal: false
        };

        this.toggle = this.toggle.bind(this);
    }

    toggle() {
        this.setState({
            modal: !this.state.modal
        });
    // console.log("modalSetting: " + this.state.modalSetting);
    }

    render() {
        return (
            ****************! trigger this when i click the dropdownitem !*********************
            <div onClick={this.toggle}>
                <a>Setting</a>
                <Modal isOpen={this.state.modal} toggle={this.toggle} className="account-setting-box">
                    <ModalHeader toggle={this.toggle}>Setting</ModalHeader>
                    <ModalBody className="scroll">
                    </ModalBody>
                    <ModalFooter className="modal-footer">
                    </ModalFooter>
                </Modal> 
            </div>
        );
    }
}

help much appreciated because i've been dealing with this issues for about two days. I can use custommenu for solving this problem, but in the name of my learning process, I'm convinced that i need to ask about this issue that i got.

Thank you very much!

Answer 1

Change the name of the toggle function in the modal as you are using same name function toggle() in parent and child component. Rename toggle() in parent or child component and it will be good to go.

// Account
toggleDropdown() {
    this.setState({
        dropDownOpen : !this.state.dropDownOpen
    });
}

and/or also change:

// AccountSettingModal
toggleState() {
    this.setState({
        modal: !this.state.modal
    });
}