👀 Views: 355 💬 Answers: 1 📅 Created: 2025-08-30

typescript react generics

I'm testing a new approach and I'm attempting to set up I'm working on a project and hit a roadblock. I'm experiencing an scenario with TypeScript when trying to define a generic functional component in React. The goal is to create a reusable dropdown component that can accept different types of options depending on the use case. Here's the code I've written so far: ```tsx import React from 'react'; type DropdownProps<T> = { options: T[]; onSelect: (option: T) => void; }; const Dropdown = <T,>({ options, onSelect }: DropdownProps<T>) => { const handleSelect = (option: T) => { onSelect(option); }; return ( <div> <select onChange={(e) => handleSelect(options[parseInt(e.target.value)])}> {options.map((option, index) => ( <option key={index} value={index}>{option}</option> ))} </select> </div> ); }; export default Dropdown; ``` When I try to use the `Dropdown` component, I'm getting this behavior in the console: ``` Uncaught TypeError: want to read properties of undefined (reading 'value') ``` I used it like this: ```tsx const MyComponent = () => { const options = ["Option 1", "Option 2", "Option 3"]; const handleSelect = (option: string) => { console.log(`Selected: ${option}`); }; return <Dropdown options={options} onSelect={handleSelect} />; }; ``` I've tried adding a check to ensure that `e.target` is defined before accessing `value`, but that didn't resolve the scenario. I suspect it has something to do with how I'm handling the event in the `onChange` handler. Any ideas on how to resolve this or best practices for using generics in functional components with TypeScript? I'm currently using TypeScript 4.5 and React 17. For context: I'm using Typescript on macOS. Is there a better approach? My team is using Typescript for this desktop app. Has anyone dealt with something similar? This is part of a larger microservice I'm building. Any ideas how to fix this?