score:1
Accepted answer
there are 2 things wrong with your code:
- action.payload.value does not exist, it is action.payload.e.value
- you cannot use the event in the reducer or you'll get an error that synthetic event will be reused, use the event value in the action instead
- an action creator should only create an object, dispatch it in the component.
const update_field = 'update_field';
const reducer = (state, { type, payload }) => {
if (type === update_field) {
const { input, value } = payload;
return { ...state, [input]: value };
}
};
const handlechangefor = (input, e) => {
//event will be re used and cause an error
// use value instead of passing event to
// reducer
return {
type: update_field,
payload: { input, value: e.target.value },
};
};
const pureinput = react.memo(function pureinput({
value,
onchange,
}) {
const r = react.useref(0);
r.current++;
return (
<label>
pure input rendered: {r.current} times
<input
type="text"
onchange={onchange('pure')}
value={value}
/>
</label>
);
});
const app = () => {
const [state, dispatch] = react.usereducer(reducer, {
name: '',
pure: '',
});
//if you want to optimize you can use usecallback
const handlechange = react.usecallback(
(input) => (e) => dispatch(handlechangefor(input, e)),
[]
);
return (
<div>
<div>
<input
type="text"
onchange={(e) =>
dispatch(handlechangefor('name', e))
}
value={state['name']}
/>
</div>
<pureinput
value={state['pure']}
onchange={handlechange}
/>
</div>
);
};
reactdom.render(<app />, document.getelementbyid('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Source: stackoverflow.com
Related Query
- Not able to update state value with use reducer
- Not able to change second value of an array in state with conditional statement in reducer --- Redux
- How to update state of a component with value from reducer state in react-redux?
- React's reducer returns unexpected state that is not consistent with logged value
- Update an specific value inside the state with the reducer
- When setting state with React's use state hook using it's prev (or initial) value throws an error Type Error 0 is not a function
- react - not able to update state in input value
- react.js not refreshing state update with date value
- Not able to access state value with dynamic key in react typescript
- It seems Axios does not update the state when use with async and await
- Not able to update reducer state in redux
- i am not able to update modal state based on received props value from other component in reactjs
- Not able to update state with editorState from server in ReactJs for draftJs
- GitHub Pages not able to update index.html meta tags with create react app(CRA)
- Why does calling useState's setter with the same value subsequently trigger a component update even if the old state equals the new state?
- Use useState value in useEffect without making the state update useEffect
- Redux Store does not update state with created data on firebase real-time database
- Calling setState with nested object does not update state correctly
- reducer does not update state in react redux
- How to fix Do not mutate state directly. Use setState() with array?
- cant update context state when using hooks with a complex object to set providers value
- state update not happening in useEffect with api call
- How do I use the spread operator to update a state value in React?
- PrevState does not update state value immediately in React JS
- React Button Click Event Update State Value But Not Reflected on Button Text
- How to assign a value to state and use setState in ReactJs with Typescript
- wrote a React code snippet to implement conditional rendering and am not able to update the state of {Left} and {Right}
- Not able to use custom functions in webpack with require
- Reactjs: How to update value in state array with react hooks?
- React component does not update with the change in redux state
More Query from same tag
- Not Supported Error when testing suspense
- Alternative to using a switch for setting state ReactJS
- Any approach to send post request for checking and inserting values in MongoDB in react?
- React Last input change is not saved in sessionStorage when refresh or changing page like goBack or Link
- Querying for data without scalar field
- Create a subdomain like slack does e.g. : https://someteam.slack.com/ in REACT JS
- How do I import Modernizr in React
- ReactJs external script - Google Maps
- Module not found: Error: Package path ./v4 is not exported from package
- Unable to add a link back to WordPress from ReactJS using WordPress Rest API for post excerpts
- Solidity & React Next.js Error not fetching Contract [NPM]
- React state values disappearing
- Redux not saving state
- Why is TestUtils.Simulate.click in Jest not working when used directly on React Components?
- How to use backgroundImage css in styled component having typescript
- Here Javascript map library not rendering
- ReactJS routing/browser-sync reload on /path produces Cannot Get /Path error
- Displaying Firebase data as array in Javascript/HTML
- ReactJS - setState() is not updating
- How to easily add reusable component into a list?
- useCallback() dependency array vs constant-reference callback
- React useEffect fetch hook makes endless calls despite array parameter
- How to use slice for update an object in array?
- Trying to extract the URL hostname from API response
- How do I append an additional path to a nested object in my JSON file, with the first half of the path being stores in a variable?
- Module.css not loading styles NEXT js
- How to use Material UI from component library in a project with Material UI already?
- how to include a file inside common files reactjs?
- How to style the active link childs using CSS in JS and React Router?
- why leaflet map doesn't render on react app