Comments (5)
Sir, in my output while running the code, it is actually incrementing-
import React, { useState } from 'react';
const NestedStateComponent = () => {
const [state, setState] = useState({ nested: { value: 0 } });
const updateNestedState = () => {
setState(prevState => ({
...prevState,
nested: { value: prevState.nested.value + 1 }
}));
};
return (
Value: {state.nested.value}
Incrementbut i think the issue lies when i add other properties into the 'nested' object and i think the solution will be to use -
setState(prevState => ({
...prevState.nested,
nested: { value: prevState.nested.value + 1 }
}));
};
instead of -
setState(prevState => ({
...prevState,
nested: { value: prevState.nested.value + 1 }
}));
};
I hope my solution will help you....
from react.
...prevState.nested
instead of -
...prevState
from react.
the code that i have used-
import React, { useState } from 'react';
const NestedStateComponent = () => {
const [state, setState] = useState({ nested: { value: 0 } });
const updateNestedState = () => {
setState(prevState => ({
...prevState,
nested: { value: prevState.nested.value + 1 }
}));
};
return (
Value: {state.nested.value}
Incrementfrom react.
@Sivanujan1998 check out the docs here,
there is an explanation of the exact same case you encountered
from react.
the thing is your component only re render when something change and here your state is not changing, so that's why your component does not re-render,
also
const updateNestedState = () => {
setState(prevState => ({
...prevState,
nested: { ...prevState.nested, value: prevState.nested.value + 1 }
}));
};
from react.
Related Issues (20)
- [React 19] Inconsistent documentation of useOptimistic second parameter HOT 2
- Bug: White Screen Issue with Vite React App on iOS – Works on Other Platforms HOT 1
- Bug: Inconsistent styles between client-side and server-side routing HOT 3
- Bug: React refresh fails when component type is changed to memo or forward ref and vice versa HOT 1
- [DevTools Bug] getCommitTree(): Invalid commit "2" for root "1". There are only "1" commits.
- Bug: in chrome version 127.0.6533.100 and the previous release, debugger hangs on breakpoint, when attempting to interact with values HOT 5
- [DevTools Bug]: Cannot view source with remote sourcemap containing absolute `sources` HOT 1
- Bug: Object.keys inside the Shallow Equal can be improved HOT 1
- [React 19] No re-render after 'useActionState' action queue finishes HOT 1
- Bug: No "exports" in use-sync-external-store package.json
- [React 19] Conditionally rendered suspendable component using `use()` shows fallback even if promise already resolved HOT 15
- [React 19]JSX asking that I should declare react at the top of the file HOT 3
- [React 19] RSC and `as` property pattern HOT 1
- [React 19] `use()` promise from state causes "async/await is not yet supported in Client Components" error HOT 1
- Bug: [Strict Mode] Inconsistent behavior updating reducer state in mount Effect vs. update Effect HOT 2
- Bug: Memory leak of old state until next render
- Bug:
- [React 19] style using precedence does not produce valid CSS when using string children HOT 2
- [React 19] style using precedence can produce many additional style elements after initial render HOT 6
- [Compiler]: Ref values (the `current` property) may not be accessed during render - showing error message for custom hooks HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.