mirror of
https://github.com/streamich/react-use.git
synced 2025-12-08 18:02:14 +00:00
1840b577e2
feat(useList): new action upsert; feat(useList): new action update; feat(useList): new action updateFirst; feat(useList): new action insertAt; feat(useList): action remove renamed to removeAt (ref remained); feat(useUpsert): useUpsert hook deprecated cause of duplicate functionality and bad naming;
1.0 KiB
1.0 KiB
useUpsert
DEPRECATED!
UseuseListhook's upsert action instead
Superset of useList. Provides an additional method to upsert (update or insert) an element into the list.
Usage
import {useUpsert} from 'react-use';
const Demo = () => {
const comparisonFunction = (a: DemoType, b: DemoType) => {
return a.id === b.id;
};
const [list, { set, upsert, remove }] = useUpsert(comparisonFunction, initialItems);
return (
<div style={{ display: 'inline-flex', flexDirection: 'column' }}>
{list.map((item: DemoType, index: number) => (
<div key={item.id}>
<input value={item.text} onChange={e => upsert({ ...item, text: e.target.value })} />
<button onClick={() => remove(index)}>Remove</button>
</div>
))}
<button onClick={() => upsert({ id: (list.length + 1).toString(), text: '' })}>Add item</button>
<button onClick={() => set([])}>Reset</button>
</div>
);
};