React + TypeScript: Handling Select onChange Event

Updated: March 3, 2023 By: A Goodman 3 comments

A select element is a drop-down list with multiple options. In this article, we will examine an end-to-end example of handling the onChange event of a select element in a React web app that written with TypeScript.

The Example

App Preview

What we are going to build is a simple web app that has a select element in the center of the screen. When a user chooses one option from the drop-down list, the selected value will be displayed.

The Complete Code

1. Create a new project with the command below:

npx create-react-app kindacode_example --template typescript

2. Replace all of the default code in your src/App.tsx (or src/App.ts) with the following:

// App.tsx
import React, { useState } from "react";

const App = () => {
  const [selectedOption, setSelectedOption] = useState<String>();

  // This function is triggered when the select changes
  const selectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const value =;

  return (
    <div style={styles.container}>
      <select onChange={selectChange} style={}>
        <option selected disabled>
          Choose one
        <option value="blue">Blue</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
        <option value=""></option>
      {selectedOption && <h2 style={styles.result}>{selectedOption}</h2>}

export default App;

// Just some styles
const styles: { [name: string]: React.CSSProperties } = {
  container: {
    marginTop: 50,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  select: {
    padding: 5,
    width: 200,
  result: {
    marginTop: 30,

3. Run the project and go to http://localhost:3000 see the result:

npm start


You’ve learned how to handle the onChange event of a select element in React and TypeScript. If you would like to explore more new and interesting stuff about modern frontend development, take a look at the following articles:

You can also check our React category page and React Native category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments
Kobi Bentata
Kobi Bentata
1 year ago

That’s a nice piece of code, but the problem is that the onChange event sends only the value of the selection option and not an event object. I’m looking for a way to catch the entire event option upon change of selection in an Ant Design Select element…

2 years ago

Also comments seem not to persist?

2 years ago

This could be way more minimal

Related Articles