Triggering a passed-down event inside custom MenuList in React-Select

Question

I want to open a modal which exists in the parent component from a button inside the MenuList of react-select. I created a custom MenuList with my button and passed it to react-select as <Select components={{ MenuList }} />. I am not sure how to handle the click event of that button in order to trigger my modal.

My code is here: https://codesandbox.io/s/rllz53k8ln

Answer 1

Inside your props on MenuList component, you have an object called "selectProps". Whatever custom prop you pass down to Select component itself will be accessible through that "selectProps" object.

Here's the code: https://codesandbox.io/s/9325wk90pr