score:3

Accepted answer

here's a generic recipe for usecontext. say you have a file context.js:

import { createcontext, usecontext, usestate } from 'react';

// no need to export this, we'll create custom hook around it
const somectx = createcontext();

// custom hook, returns array with state, setter
export const usesomectx = () => usecontext(somectx);

// convenience hook so you don't have to destructure
// everywhere, returns read-only state
export const usesomectxstate = () => {
    const [state] = usecontext(somectx);
    return state;
};

// provider, goes in render tree above components where you
// import/use the accessor hooks above.
export const somectxprovider = ({children, init}) => {
    const myctx = usestate(init); // [myctxstate, setmyctxstate]
    return <somectx.provider value={myctx}>{children}</somectx.provider>;
};

then in your index.js:

import {somectxprovider} from './context.js';
// other stuff

// setting at the root makes the context globally visible, you
// may want to apply the principle of least privilege
// and put this further down in the render tree.
reactdom.render(<somectxprovider><app /></somectxprovider>, somedomelement);

then in your app.js

import {usesomectx} from './context.js';
function app() {
  const [state, setstate] = usesomectx(); // or state = usesomectxstate()
  // whatever
}

now you can make state changes just like you normally would, and any component that uses the hooks you're providing will re-render and get the latest state. you can wire the setter to whatever event listener(s) are required (like a click on your button).

note that unlike the older pattern where you kept your entire app state in one huge object, you aren't limited to one context. you can have different contexts with their own custom hooks per the pattern above and have them be available at any point in the render tree below where you put the provider (which in the example i gave is at the root, so everywhere in that case).

also note that this is pretty short and sweet for how powerful it is, any component in your entire app can access this just by importing and using the custom hook defined above and will automatically re-render if it changes. you may want to be more careful about handing out the setter, which is why i included the read-only hook: global variables are evil. although if you have an app that complex you should probably be using usereducer and dispatching actions rather than usestate.

score:-1

you can also just pass the state up via a state changing function and usestate in your app.js. then you can pass the state down to other components.

score:0

  • it's better to apply context api for consuming components

  • take a look at your submit action. there are 2 approaches to pursue.

    1. onsubmit on form element

    2. onclick on button element inside a form through type="submit"

seems you're not sending anything after a submission using one of the above-mentioned methods. check it out.


Related Query

More Query from same tag