CODEWITHSUNDEEP
reactjsdrop-down-menuonclickreactstrap
xif
xif

Reputation: 343

DropdownMenu and DropdownItem onClick with ReactJS / Reactstrap

I want to have a dropdownMenu with dropdownItem,

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

enter image description here

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 ?

Upvotes: 2

Views: 15542

Answers (2)

Larry Jacobs
Larry Jacobs

Reputation: 111

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.

Upvotes: 1

Yuji Naraki
Yuji Naraki

Reputation: 11

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>

Upvotes: 1

Related Questions