useForm Hook & Custom Context [React]
I'm building out a fairly simplistic component structure for several pages. To cut down on several snippets of duplicate code, I attempted to set up a separate context that contains what was intended to be:
- a shared
datastate - the
setDataaction - a function switch for calling the provided
get/post/put/etc methods, on a supplied url, usingdata
When pulling data and setData off the context, and attempting to setData for a specific value, its like the values are completely disconnected; context's data never updates, state updates with setData fails silently, and the function switch to issue the updates fails (no error details provided).
[Example Context]
...
const {data, setData, post, put} = useForm()
return (
<FormContext.Provider value={{
data,
setData,
issueUpdate: (url, method = "put") => {
switch (method) {
case "put":
put(url, {
...data,
onSuccess: () => {},
onError: () => {}
}
break;
case "post":
......
}
}
}}>
...
[Example Component]
const {data, setData, issueUpdate} = useFormContext()
<input name="Name" onChange={(e) => setData(e.target.name, e.target.value)}/>
<button onClick={() => issueUpdate('/path/to/endpoint')}>Save</button>
When I access the exact same values from the useForm hook inside the component directly - including the switch function - everything works fine.
Is there some reason I should be expecting this behavior? is the useForm usage really expected to just exist in a single component with no external access? Surely I'm missing something.
Bonus: While we're on the topic, also curious if there are non-hook methods for accessing usePage and useForm?
Please or to participate in this conversation.