score:1
you have quite a few problems in your code, for example, you shouldn't pass imperative api like that, should rely on props/onchange callbacks api instead, it's more react way. take a look at react docs on how components should interact with each other:
https://reactjs.org/docs/components-and-props.html
but if you just want an answer to the question, then the problem is here:
<main key={uuid.v4()}/>
you generate a unique key
on every re-render. this will cause react to identify the entire component as a "new" component among its siblings, un-mount it, and mount it back from scratch. which results in your state "resetting" to the default one.
"key" is usually used in the list-like components, you don't need it here. just remove it and the state will go back to "normal" behaviour.
Source: stackoverflow.com
Related Query
- React context magically change other state
- React hooks, provide context but don't rerender children on state change
- change state for onClick event in other component react
- React hooks: listen to only one state change but depend on several other states to update a new state?
- React send state after login to other component to change html
- React Router - Change state of other components
- Change state without overriding other values in react
- React change state automatically after a post has been added on other component
- Change the state of progressBar using React Context
- Change state if I choose other React Router?
- State change onClick with React Context
- React onClick state Change for something other than e.target.value without redux
- Testing react component that uses Context - change state of component under test
- Updating state on props change in React Form
- React Child Component Not Updating After Parent State Change
- React js change child component's state from parent component
- React component not re-rendering on state change
- react change class name on state change
- How to change props to state in React Hooks?
- React Hooks - useEffect fires even though the state did not change
- Change state when properties change and first mount on React - Missing function?
- React shouldComponentUpdate() is called even when props or state for that component did not change
- How to change React context programmatically?
- Change react hook state from parent component
- How to change multiple properties of a state in react (at the same time)?
- Can we pass setState as props from one component to other and change parent state from child component in React?
- How to use React Context with useState hook to share state from different components?
- React hooks change the state on postMessage
- How to share React context state across separately mounted component trees
- React leaflet center attribute does not change when the center state changes
More Query from same tag
- Cancel All Subscriptions and Asyncs in the componentWillUnmount Method, how?
- React Link component spans the entire width of the div
- React Typescript mapping with an existing object
- Type 'number' is not assignable to type 'GraphQLScalarType | undefined'
- Mask Textfield component in Material-UI
- Fetch certain information on click from api and have it stop after 10 clicks
- msal in React SPA - use access token received from AcquireTokenRedirect
- How to make only text of react bootstrap table header clickable
- convert TZ date format to "dd/mm/yy hh:mm:ss" in Javascript
- How to change the data in Home component on the basis of menu component in React.js
- how to import images via props in react and use the 'import' path
- Accessing mobx observable property in React Component in Jest unit test
- Control order of TAB with javascript (react)
- How do I access a global variable after it has been stored locally?
- REACT: toggle class onClick, and call other function
- menuLinks.map is not a function
- higher order function filter method of a component
- HTML get the inner html tags value onSubmit of the form in React
- React function executes continuously and state keeps refreshing
- How to render conditionally depending on which button is clicked?
- How-to write media dependant code with react material-ui?
- ReactJS Setting focus to an input in a tree structure
- "Warning: Failed prop type" When using react-datepikcer with redux-form
- How to mock an IIFE while importing in jest test
- Javascript: add a character to a string containing a specific word
- Deep changes of objects cannot be observed in mobx
- React.render in TypeScript for component with both props and state
- Development server returned response error code: 500 \ React Native
- Can I call two function on useEffect hook ? It complains controlled input to be uncontrolled?
- Problem switching to functional component react with useEffect