score:15
Accepted answer
ensure that component state is updated via the setstate()
method, rather than via direct modification as you are currently doing.
there are a number of ways to update nested data in a complex state structure - a simple solution that should work in your case would be:
class app extends component {
state = {
foo: {
title: "my title",
bar: {}
}
}
componentdidmount() {
// create new "bar" object, cloning existing bar into new bar
// and updating test key with value "123"
const newbar = { ...this.state.foo.bar, test : "123" };
// create new "foo" object, cloning existing foo into new foo
// and updating bar key with new bar object
const newfoo = { ...this.state.foo, bar : newbar };
// calling setstate() correctly updates state and triggers
// re-render. here we replace the existing foo with the newly
// created foo object
this.setstate({ foo : newfoo });
// this.state.foo.bar = { "test": "123" };
}
}
score:8
you could do it like this
componentdidmount() {
let copyfoo = { ...this.state.foo}; //create a new copy
copyfoo.bar = { "test": "123" } //change the value of bar
this.setstate({foo: copyfoo})//write it back to state
}
or you could just do
componentdidmount() {
let copyfoo = { ...this.state.foo, bar: { "test": "123" } }; //create a new copy and change the value of bar
this.setstate({foo: copyfoo})//write it back to state
}
Source: stackoverflow.com
Related Query
- Set a dictionary inside a state dictionary in React
- How to set a state of an array of object inside an array of objects in react
- React Hooks: using useState inside useEffect doesn't set the state immediately after first rendering
- React cannot set state inside useEffect does not update state in the current cycle but updates state in the next cycle. What could be causing this?
- How to set state inside a loop with a time delay in react js
- React - How to use the current state value as a variable so i can set as a index inside an array
- React JS - How to set state of variable inside variable?
- React - State set inside useEffect axios request is empty
- How to set the state of parent component in react from inside child component
- Rewrite a function to find an object by a matching id inside an array, update a value and set a react state
- React set state inside FullCalendar's datesSet
- React state being set back to initial [] when socket.on() is triggered inside useEffect()
- How to set value to a state variable inside a function in react
- set react 18next value inside state
- Can I set state inside a useEffect hook
- Set loading state before and after an action in a React class component
- set initial react component state in constructor or componentWillMount?
- How to set state of response from axios in react
- Set React component state from outside of component
- How to set React component state and props from browser
- How can I set initial React state from API data?
- how to set state array using react hooks
- Can not update state inside setInterval in react hook
- state inside useEffect refers the initial state always with React Hooks
- How to correctly set initial state in React with Typescript without constructor?
- React: If you set state in a request animation frame will react schedule rendering on the animation frame?
- Why set a React Component's state outside of the constructor?
- Prop destructuring inside of react state
- How to TEST async calls made in componentDidMount that set the state of React Component
- Set state with React Shallow Rendering
More Query from same tag
- Thin arrow inside circle using css (for use with React)
- reactjs - Is it possible to have non nested routes
- react-bootstrap-table double header
- How to properly do nested imports for scss?Semantic-UI issues?
- setState() does not change state when called from element that depends on state to render
- Why I can not receive results of axios in ReactJs Datatables in render section
- How to access props in function?
- How do I use Object.entries(...).forEach.every?
- Material-UI dependencies: ''react-tap-event-plugin'' has no exported member 'injectTapEventPlugin'
- NextJs/Material-ui not respecting makeStyles CSS
- Enforced properties on a React component with TypeScript
- unable to set prop on nested component
- In KnovaJs, How to allow Rect to expand with Text or Allow Text to Have Border That Expand With Text Like If its Div in Html
- Cannot read property 'function' of undefined using this.function (React.js)
- How to pass as prop for a React Element an object that has a huge number of properties?
- Progress Bar with react.js
- Multiple Conditions not working in Styled-Component
- Error message : If you meant to render a collection of children, use an array instead React JS
- Adding Header & Footer for all screens in JSPDF
- ReactJS Socket.io Convert json.stringify to json object
- Pass data across Screens
- how to prevent/lock a function from returning until another separate async call has resolved?
- Seeking advice: Reason for maximum update depth exceed
- React Router v4 redirect to authenticated route when user successfully signIn
- React not loading state properly on mount during axios call
- Task :react-native-webview:compileDebugJavaWithJavac FAILED
- onchange input and set state not working?
- Import react components with absolute path
- React hooks cause unintentional re-render
- How to set the width of material ui Popper to its container's width while setting disable portal as false