bootstrap dropdown.item onClick/onSelect event doesnt work

Question

I have a simple drop down menu with some items, I want on click on item to call a function.

for some reason the function inside the onClick is being called when the component is being loaded. and when clicking on the item with the onClick event nothing happens

onClick and onSelect both behave the same way, the function handleAction is being called when DropDownMenu component is loaded

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import DropdownButton from 'react-bootstrap/DropdownButton'
import Dropdown from 'react-bootstrap/Dropdown'

class DropDownMenu extends Component
{
    render() {
        var DropdownMenu = <DropdownButton id="dropdown-item-button" title="Actions">
                            <Dropdown.Item as="button">
                                Run check
                            </Dropdown.Item>
                            <Dropdown.Item as="button">
                                <div onClick={this.props.handleAction('sync_event')}>
                                    Sync CA
                                </div>
                            </Dropdown.Item>
                        </DropdownButton>;
        if(!this.props.isActionPossible)
        {
            DropdownMenu = <DropdownButton disabled id="dropdown-item-button" title="Actions"> </DropdownButton>;
        }
        return (
            <div>
                {DropdownMenu}
            </div>
        );
    }
}

DropDownMenu.prototypes = {
    isActionPossible: PropTypes.bool.isRequired,
    handleAction: PropTypes.func.isRequired
};

export default DropDownMenu;

Mihályi Zoltán Mihályi Zoltán · Accepted Answer · 2019-06-18T15:58:43

You accidentally called the function while rendering. Instead of writing

<div onClick={this.props.handleAction('sync_event')}>

Try

<div onClick={()=>this.props.handleAction('sync_event')}>

bootstrap dropdown.item onClick/onSelect event doesnt work

1 Answers