React setter function
September 04, 2021
1 min read
— views
Implementation
src/lib/setter.ts
import type * as React from "react"; type Set<T> = React.Dispatch<React.SetStateAction<T>>; type ChangeEvent<E> = React.ChangeEvent<E>; type Input = HTMLInputElement | HTMLTextAreaElement; export function setter<T extends number | string | Date, E extends Input = HTMLInputElement>( setX: Set<T>, ) { return (e: ChangeEvent<E>) => { setX(e.target.value as T); }; }
Usage
import { setter } from "lib/setter"; const Component = () => { const [name, setName] = React.useState<string>(""); return <input id="name-input" value={name} onChange={setter(setName)} />; };