{"id":5067,"date":"2021-05-17T13:31:02","date_gmt":"2021-05-17T12:31:02","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=5067"},"modified":"2023-09-21T14:05:52","modified_gmt":"2023-09-21T13:05:52","slug":"react-complex-state-object","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-complex-state-object\/","title":{"rendered":"React Complex State object hook"},"content":{"rendered":"\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"typescript\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">export function useObjectState&lt;T>(initialValue: T): [T, (c: Partial&lt;T>) => any] {\n    const [item, setItem] = useState&lt;T>(initialValue);\n    const handleChange = (changes: Partial&lt;T>) => setItem(existing => ({ ...existing, ...changes }));\n    return [item, handleChange];\n}\n\n\/\/ Example use:\nconst [item, handleChange] = useObjectState&lt;ITransporterNotification>(props.item);\n\n&lt;div>\n    &lt;Input placeholder=\"Omschrijving\" value={item.description} onChange={(e) => handleChange({ description: e.target.value })} \/>\n&lt;\/div>\n\n&lt;div>\n    &lt;DatePicker defaultValue={getDayJs(item.showFrom)} onChange={(d, s) => handleChange({ showFrom: s })} \/>\n&lt;\/div><\/pre><\/div>\n\n\n\n<p>Without hook:<\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"typescript\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">\nexport function EditAbsencePopup(props: { calendar: ICalendar, calendarEvent: ICalendarEvent, closeFn: () => void, date: Date }) {\n    const { calendar, calendarEvent, closeFn, date } = props;\n    const [state, setState] = useState&lt;Partial&lt;ICalendarOverride>>({});\n    const updateState = (newState: Partial&lt;ICalendarOverride>) => setState(oldState => {...oldState, ...newState});\n\n    \/\/ ...\n\t\n\tuseEffect(() => {\n\t\tupdateState({ hideOtherEvents: true });\n\t});\n}\n\nexport interface ICalendarOverride {\n    oid?: string;\n    calendarId: string;\n    description: string;\n    status: CalendarEventStatus;\n    startDate: Date;\n    endDate: Date;\n    start: string;\n    end: string;\n    isEntireDay: boolean;\n    hideOtherEvents: boolean;\n}<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Without hook:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5067","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=5067"}],"version-history":[{"count":4,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5067\/revisions"}],"predecessor-version":[{"id":8034,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5067\/revisions\/8034"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=5067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=5067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=5067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}