JS Object is showing undefined in LWC function call

Question

This is the function I'm trying to call from my function. It's erring on the last line here because selectedOption is undefined.

handleStatusChange(event) {
  console.log('status change event: ' + event.detail.value);
  event.stopPropagation();
  const { currentTarget, detail } = event;
  const { selectedOption, context } = detail;
  const { value, label } = selectedOption;

I think there's a hierarchy here: event has detail, detail has selectedOption, selectedOption has value.

In my function, I only care about passing 'value'. Why is selected selectedOption undefined?

    this.handleStatusChange({ 
      detail: () => {
        selectedOption: () => {
          value: 'Pitched'
        }
      },
      stopPropagation: () => {}
    });

Answer 1

() => {} is the Arrow function syntax. You haven't created objects, so much as functions. For normal objects, use {} instead:

this.handleStatusChange({ 
  detail: {
    selectedOption: {
      value: 'Pitched'
    }
  },
  stopPropagation: () => {}
});