I'm just trying to output text to the console when I click on a MenuItem in the dropdown menu. Can anyone spot what I'm doing wrong? There isn't much help on this topic besides the example component in the docs.
itemRenderer(item) {
return (
<MenuItem
key={item.id}
label={item.year}
text={item.season}
shouldDismissPopover={true}
/>
)
}
handleclick(item) {
//this never runs :(
console.log('clicked')
}
render() {
return (
<Select
items={this.state.semesters}
filterable={false}
itemRenderer={this.itemRenderer}
onItemSelect={this.handleclick}
>
<Button text={'Select a Semester'} rightIcon="caret-down" />
</Select>
)
}
You should add a click handler on each MenuItem
:
itemRenderer(item, {handleClick}) { // added {handleClick} argument
return (
<MenuItem
key={item.id}
label={item.year}
text={item.season}
onClick={handleClick} // added this line
shouldDismissPopover={true}
/>
)
}
Check CodeSandbox demo: https://codesandbox.io/s/3rplzz746m (open the console)