OnClick Component inside <DropdownItem> not changing its component's state

[cyclonstep]

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

Code

// 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")}>
                             *********! Can't trigger the setState from this Component !***********
                            <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! 👍

[kjr247]

I am also seeing this problem.

[TheSharpieOne]

I see the toggle and the onClick happening: https://stackblitz.com/edit/reactstrap-v5beta-vmf4st?file=index.js
If you want that menu item to trigger a modal, you should not put the modal inside of it: https://stackblitz.com/edit/reactstrap-v5beta-dach7f?file=index.js

here it is just inside the dropdown, which works because the modal is rendered outside of the dropdown when the dropdown is hidden: https://stackblitz.com/edit/reactstrap-v5beta-bcpca6?file=index.js
if you wanted the dropdown to stay open: https://stackblitz.com/edit/reactstrap-v5beta-xptjru?file=index.js

Edit

Nevermind, I see what you are saying. It's not that the toggle isn't getting called, it's that the component within the dropdownmenu is not keeping it's state.
The dropdownmenu removes the popper when it is not showing, this causes the components within the dropdownmenu to reinitialize, clearing their state.
We remove the popper for performance so that there are not as many running at a given time (really only one at a time for typical usage). We may need to not do that...

[TheSharpieOne]

Sorry I forgot to come back to this. I added a persist prop to DropdownMenu. When true, the DropdownMenu will always render a Popper and not remove it when hidden.
This prop allows the children to persist their state and not be re-initialized when the menu opens/closes.
The side-effect: with each Popper (even why not displaying AFAIK) it will attach listeners and perform positioning logic when the user scrolls or the windows resizes. Having too many of them can impact performance. See #584

[Amir-Pasha-Bagheri]

Sorry I forgot to come back to this. I added a persist prop to DropdownMenu. When true, the DropdownMenu will always render a Popper and not remove it when hidden. This prop allows the children to persist their state and not be re-initialized when the menu opens/closes. The side-effect: with each Popper (even why not displaying AFAIK) it will attach listeners and perform positioning logic when the user scrolls or the windows resizes. Having too many of them can impact performance. See #584

Still not working

[btengland]

Sorry I forgot to come back to this. I added a persist prop to DropdownMenu. When true, the DropdownMenu will always render a Popper and not remove it when hidden. This prop allows the children to persist their state and not be re-initialized when the menu opens/closes. The side-effect: with each Popper (even why not displaying AFAIK) it will attach listeners and perform positioning logic when the user scrolls or the windows resizes. Having too many of them can impact performance. See #584

This worked for me.