DropdownMenu and DropdownItem onClick with ReactJS / Reactstrap

Question

I want to have a dropdownMenu with dropdownItem,

when I click on an item, it show the ref item

But actually when I click, nothing happen

toggle function : handle the dropdown

handleClick: supposed to print my event Ref but it never throwed

What I did : (I volontary delete some code to keep just the purpose of the question, this.props.currentEvents is well filled)

class DefaultHeader extends Component {

  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false,
      selectedEvents: "Choose Your Event",
    };
  }

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

  handleClick = (eventRef, name) => {
    console.log('toogle event ref', eventRef);
    this.setState({selectedEvents: name, selectedEventsID: eventRef});
}

  render() {
    const { children, ...attributes } = this.props;
    return (
      <React.Fragment>

        <ButtonDropdown className="info d-md-down-none" display="lg" mobile isOpen={this.state.dropdownOpen} toggle={this.toggle} style={{marginRight: 10}}>
        <DropdownToggle caret>
         {this.state.selectedEvents}
        </DropdownToggle>
        {this.props.currentEvents.map((event, index) => 
           <DropdownMenu key={index}>
              <DropdownItem onClick={this.handleClick.bind(this,event.eventRef, event.name)}>{event.name}</DropdownItem>
           </DropdownMenu>
        ): (<DropdownMenu>
                <DropdownItem>You don't manage any event for the moment</DropdownItem>
           </DropdownMenu>)

      </React.Fragment>
    );
  }
}

I already used onClick function like this, and it works, but for dropdownMenu, it's not working, it look like the function is never called, or toggle is called instead of onClickHandle(),

Any tips about it ?

Just to get this straight, the problem is that handleClick is never called and console.log('toogle event ref', eventRef); never shows up, right? — S.Haviv
– S.Haviv, Commented Mar 22, 2019 at 14:30
Yes exactly, but I already used onClick function like this to pass parameter and it works, but with this dropdownMenu, no. I guess toggle function interfer with it — xif
– xif, Commented Mar 22, 2019 at 14:32

Yuji Naraki · Accepted Answer · 2019-10-02 11:14:41Z

1

I had the same problem. My solution is below.

              <DropdownItem onClick={this.handleClick.bind(this,event.eventRef, event.name)}>{event.name}</DropdownItem>

instead

              <DropdownItem onClick={() => this.handleClick.bind(this,event.eventRef, event.name)}>{event.name}</DropdownItem>

answered Oct 2, 2019 at 11:14

Yuji Naraki

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Larry Jacobs · Accepted Answer · 2021-03-16 08:39:30Z

1

I had the same problem. When you wrap DropItems with DropdownMenu, you should pass container props like this:

<DropdownMenu container="body">

Hope this helps someone else who has the same problem.

answered Mar 16, 2021 at 8:39

Larry Jacobs

1112 bronze badges

Collectives™ on Stack Overflow

DropdownMenu and DropdownItem onClick with ReactJS / Reactstrap

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related