score:3
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.
onsubmit
on form elementonclick
on button element inside a form throughtype="submit"
seems you're not sending anything after a submission using one of the above-mentioned methods. check it out.
Source: stackoverflow.com
Related Query
- useContext not updating on state change in React
- React Child Component Not Updating After Parent State Change
- Props not updating when redux state change in React Hooks
- react is not updating functional component state on input change
- React Child with useEffect() not updating on Parent State Change
- React UI not updating on state change
- React Component not updating with state change
- REACT + REDUX: on redux state change mapStateToProps updating state but view is not rendering as per new state
- react state not updating on input change
- React Hooks useContext not allowing state change
- React JS component not updating on state change
- React useCallback not updating state onChange on the first change
- React view not updating on state change
- Component not updating on state change with React Router
- React useContext not rerendering on state change
- Bootstrap v4 popover not updating on state change in React
- React Testing Library with UseReducer & UseContext not updating state properly
- React DOM not updating on state change
- React does not change state after updating state in usestate hook (in custom function form)
- React components not updating with state change
- React state not updating after one time change through event handler
- Updating state on props change in React Form
- State not updating when using React state hook within setInterval
- React setState not updating state
- React component not re-rendering on state change
- React Hooks - useEffect fires even though the state did not change
- React component not updating when store state has changed
- React shouldComponentUpdate() is called even when props or state for that component did not change
- Why is my react component not updating with state updates?
- React Mobx - component not updating after store change
More Query from same tag
- Trying to style an item with a specific custom class with material UI
- How pass a array and setArray in value of provider (React, Typescript, Context)
- Add javascript object on componentDidMount in rendered html
- typescript class using function with many shapes (overloads) | generics
- Is *onbeforeunload* cached on Safari (macOS)?
- how to edit/update initialState in slice redux
- Why WhatsApp web does not show og image?
- Trying to insert image into database using React and Laravel 7
- jest trying to parse .css
- setIsOpen is not a function
- React.js: How to pass onchange value of listbox to function?
- How to reset the value of antd autocomplete, if the value is not in the data source
- can't import React Component
- Material-ui V3 is not loading first tab for after fetch data (or page load)
- Reusable Component in React Infinite Loop
- React hooks functions have old version of a state var
- Proper Way of Searching in React with debounce
- media query screen height not functioning for image
- How to test keydown event in React with Jest/Enzyme?
- How to access object provided by onloadedmetadata?
- using a simple component (dumb) to create a list of buttons and use parent method
- Adding dark mode but context is undefined
- Using If-else inside a class.
- How do I pass a function to a child component using react-router
- CoreUI + React Hook Form
- I am using react js and jsx and trying to get a simple search input field to grow when clicked
- Reduce the number of times a class/function being called in a table
- custom hooks return value doesn't change in Component
- How do I scroll horizontally in responsive view?
- How do I set the result of an API call as the default value for a Recoil atom?