use-record
This hook makes it easier to manipulate Record
s in React
import React from 'react'import { useRecord } from 'use-record' const initialState: Record<string, number> = { foo: 0, bar: 0, baz: 0 }const inc = (x: number) => x + 1const dec = (x: number) => x - 1 export const MyComponent: React.FC = () => { const [state, setRecord, setRecords] = useRecord(initialState); return ( <> <ul> {Object.entries(state).map(([key, val]) => ( <li key={key}> <button onClick={() => setRecord(key, dec)}>-</button> {key}: {val} <button onClick={() => setRecord(key, inc)}>+</button> <button onClick={() => setRecord(key, 0)}>RESET</button> </li> ))} </ul> <button onClick={() => setRecords(initialState)}>RESET ALL</button> </> );};