In many cases when we write JSX code, HTML inside a react component and we’ll be using typescript. We’ll find ourself interacting with build in events of the browser. one of those events is known as “HTMLSelectElement” or the event that occurs when a user click on an element inside “option” and “Select” html tags. When user interact with those items, The browser fires event and we want to catch that event (to see what the user pick from the list of options) and perform actions accordingly.

In order to make the event itself accessible via Typescript here’s What we’ll do:

We’ll import changeEvent from react We’ll use it to assign to the change event function Than we’ll use “HTMLSelectElement” to define the type of the change event, which is a select HTML element. Let’s see the code

import React, { ChangeEvent } from 'react';

// Define your component
const YourComponent: React.FC = () => {

  // Define the event handler function
  const handleMenuOnChange = (e: ChangeEvent<HTMLSelectElement>) => { // <----- here we assign event to ChangeEvent
    // Your logic here
    console.log(e.target.value); // Example: Log the value of the selected option
  };

  // Render your component with the event handler attached
  return (
    <select onChange={handleMenuOnChange}>
      {/* Your select options */}
      <option value="1">one</option>
      <option value="2">two</option>
    </select>
  );
};

export default YourComponent;

more code examples you can find here