CODEWITHSUNDEEP
reactjstypescript
Tee F
Tee F

Reputation: 285

onSelect returns first param undefined

I have a dropdown button with the eventhandler:

onSelect={this.handleSelect.bind(this)}>

However the first param i receive is undefined the second param is Proxy with info about the event. Why is my first param undefined?

  private handleSelect(e1, e2) {
    debugger;
    e1;
    console.log(e2);
  }

e1 is undefined e2 holds event details

the event handler is called on select which resides in an arrow function 

renderRanks = () => {
const { intl } = this.props;

return (
    <DropdownButton bsSize="sm" id="ranks"
      title={"Title"}>
      {this.store.levels.map((pl) =>
        <MenuItem data={pl.Id} key={pl.Number}>{pl.Name}</MenuItem>)}
    </DropdownButton>
)
}

Which is being called from my render

{this.renderDropdown()}

Upvotes: 1

Views: 160

Answers (2)

FortyTwo
FortyTwo

Reputation: 2639

onSelect event handler expects eventKey and event as its params. You are declaring key (from react) but you aren't declaring eventKey (from react-bootstrap). 

<MenuItem data={pl.Id} key={pl.Number} eventKey={pl.Number}>{pl.Name}</MenuItem>)}

editing your MenuItem populate call as above should then give you e1 -> eventKey and e2 -> event in your handleSelect

Upvotes: 1

Leeroy_Wonkledge
Leeroy_Wonkledge

Reputation: 351

Use onChange event instead. your function handleSelect will be like below

handleSelect = (event) => {
    const e1 = event.target.value // contains value of select
    const e2 = event // contains event object
}

Upvotes: 1

Related Questions