Listbox: How to get value of Selected Item to pass to State?

[arkmech]

Background: Passing React State Setter to onChange automatically sets the selected value to state.

function MyListbox() {
  return (
    <Listbox value={selectedOption} onChange={setSelectedOption}>
   
    </Listbox>
  )
}

What I need is additional functionality when <MyListbox/> changes besides just setting state, therefore I take an onChange function.

function MyListbox({onChange}) {
  return (
    <Listbox value={selectedOption} onChange={onChange}>
   
    </Listbox>
  )
}

onChange being taken in as a prop, how to get selectedOption value outside of <MyListbox/> component?

onChange={() => {
  setSelectedOption();
  // other functionality
}}

[sboy99]

Headless ui itself handles the state by passing a value

const [selectedOption,setSelectedOption]=useState(selectedOptions[0]);

The function setSelectedOption goes like this

(value:Type)=>void

So you have to define the function as per the context

Solution

`TypeScript`:

  onChange={(value:Type) => {
  setSelectedOption(value);
  // other functionality
}}

`JavaScript`: 

onChange={(value) => {
  setSelectedOption(value);
  // other functionality
}}