How to get current value using onDoubleClick event listener on PrimeReact Listbox

Question

I'm trying to get current value using onDoubleClick event listener on PrimeReact Listbox to use it for updating data on the list.

I set e.target.ariaLabel as arg, but it doesn't work.

The error says, 'Property 'ariaLabel' does not exist on type 'EventTarget'.'.

Then I triggered the event, checked console and found ariaLabel surely exists, which is quite confusing.

How can I get current value properly? Any hints would be appreciated. Thank you in advance.

// initialize the state
  const [selectedSubClassification, setSelectedSubClassification] = useState<{ id: number; name: string }>({
    id: 0,
    name: '',
  });

// trigger the event
onDoubleClick={(e) => {
 setSelectedSubClassification(e.target.ariaLabel)
 }}

// call func
  function addDataFromList() {
    if (data[selectedRow.row]['name']) {
      let prevData: any = [...data];
      prevData = prevData.map((item, index) => {
        if (index === selectedRow.row) {
          return {
            ...item,
            mst_main_classification: selectedMainClassification.name,
            mst_main_classification_id: selectedMainClassification.id,
            mst_sub_classification: selectedSubClassification.name,
        mst_
sub_classification_id: selectedSubClassification.id,
          };
        }
        return item;
      });
      setData(prevData);
    }
  }

Answer 1

You can do this...

      <ListBox
        value={selectedCity}
        options={cities}
        optionLabel="name"
        onDoubleClick={(e) => alert(e.target.ariaLabel)}
      />

Example: https://stackblitz.com/edit/react-paeglr?file=src%2FApp.tsx