React setter function

A simple function to update input state.

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);
  };
}
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