React Complex State object hook

Date: 2021-05-17
export function useObjectState<T>(initialValue: T): [T, (c: Partial<T>) => any] {
    const [item, setItem] = useState<T>(initialValue);
    const handleChange = (changes: Partial<T>) => setItem(existing => ({ ...existing, ...changes }));
    return [item, handleChange];
}

// Example use:
const [item, handleChange] = useObjectState<ITransporterNotification>(props.item);

<div>
    <Input placeholder="Omschrijving" value={item.description} onChange={(e) => handleChange({ description: e.target.value })} />
</div>

<div>
    <DatePicker defaultValue={getDayJs(item.showFrom)} onChange={(d, s) => handleChange({ showFrom: s })} />
</div>

Without hook:

export function EditAbsencePopup(props: { calendar: ICalendar, calendarEvent: ICalendarEvent, closeFn: () => void, date: Date }) {
    const { calendar, calendarEvent, closeFn, date } = props;
    const [state, setState] = useState<Partial<ICalendarOverride>>({});
    const updateState = (newState: Partial<ICalendarOverride>) => setState(oldState => {...oldState, ...newState});

    // ...
	
	useEffect(() => {
		updateState({ hideOtherEvents: true });
	});
}

export interface ICalendarOverride {
    oid?: string;
    calendarId: string;
    description: string;
    status: CalendarEventStatus;
    startDate: Date;
    endDate: Date;
    start: string;
    end: string;
    isEntireDay: boolean;
    hideOtherEvents: boolean;
}
50670cookie-checkReact Complex State object hook