React setter function
September 04, 2021
— 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);
};
}
tsx
Usage
import { setter } from "lib/setter";
const Component = () => {
const [name, setName] = React.useState<string>("");
return <input id="name-input" value={name} onChange={setter(setName)} />;
};
tsx