score:1
okay. so the following is bad practice
state.theme.quiz.quizsleepcomfort.justme = checkeditems;
you should pass a function to the question
component, something like onchange
.
the onchange
function should update the state in your parent component. use the spread operator ...
to get a copy of the old object. for example
const onchange = (newstate) =>
setstate((oldstate) => ({
...oldstate,
justme: { ...oldstate.justme, ...newstate },
}));
the resulting object will contain all the properties of the original state but will overwrite any property set on newstate
in justme
. if the property that you want to update is more nested, just repeat the steps of spreading.
--- update ---
i have added an example that i think is close to what you are trying to achieve.
const parent = () => {
const [state, setstate] = usestate(initialstate);
const onchange = usecallback(
(newstate) =>
setstate((oldstate) => ({
...oldstate,
theme: {
...oldstate.theme,
quiz: {
...oldstate.theme.quiz,
quizsleepcomfort: {
...oldstate.theme.quizsleepcomfort,
justme: {
...oldstate.theme.quizsleepcomfort.justme,
...newstate,
},,
},
},
},
})),
[],
);
return <question onchange={onchange} />;
};
const checkboxes = [
{
label: 'firm',
value: 'firm',
},
{
label: 'medium',
value: 'medium',
},
{
label: 'soft',
value: 'soft',
},
];
const question = ({ onchange }) => {
const [checkeditems, setcheckeditems] = usestate([]);
useeffect(() => {
onchange(checkeditems);
}, [checkeditems, onchange]);
return (
<questioncommoncontainer>
{checkboxes.map((item, id) => (
<quizcheckbox
label={item.label}
name={item.label}
value={item.value}
selected={checkeditems[item.value] === true}
onchange={(e) => {
setcheckeditems((oldcheckeditems) => ({
...oldcheckeditems,
[e.target.value]: e.target.checked,
}));
}}
/>
))}
</questioncommoncontainer>
);
};
export default connect(question);
as you are having a really nested object to update, it might be worth taking a look at object.assign
Source: stackoverflow.com
Related Query
- Updating the state of object values in React
- Updating the array object in React state using immutability helper
- React Forms Updating nested state object - reconstructing the state object from input
- how do i update state in react for updating the value of an object inside an array using array.map function
- React Updating Nested State Object deletes other values
- useState in react is not updating the state object
- Updating the state in a react component with canvas object fails
- Values in the React state object changes strangely
- Updating the state of object of key:value (array) in React
- How to keep the updated state array of object values when update the same state again in React JS useState?
- How to push a new object into state without removing the previous values in React
- React - updating an object array in the state with setState
- Updating the values selected by "Select tag" in the state object
- React component doesn't have access to new state values unless the method updating the state is run twice
- Updating and merging state object using React useState() hook
- React - Updating state (array of objects). Do I need to deep copy the array?
- Updating the react component state when a global variable changes
- Append array of values to the current array in a state in React JS
- Form created with React doesn't update the backing state object
- React not updating state with setState with Array of object
- React componentDidMount not updating the state
- Is it ok to pass the entire Redux state object into a React component?
- React is not updating when Redux state is changed below the first level
- Too many re-renders. React limits the number of renders to prevent an infinite loop. Updating state of a functional component inside the render method
- Why is the state not updating inside this react Hooks component?
- Display data in a React component from an object where the keys are different but the values are the same
- Updating the field of the nested object not re-rendering the views (UI) in React Redux
- Updating one of the Formik initial values with state resets all other values
- Updating the values in an array of objects in react js
- Why does React re-render differently whether the state is an object vs a string?
More Query from same tag
- Original codes run well, but when I change to replace React.createElement by JSX, it seems not working, why?
- How to authenticate user in gatsby
- React-Redux How to fire an action automatically on loading
- React TypeScript - Why does Boolean() behave differently than double NOT (!!) operator when trying to conditionally render with && operator?
- next.js Setting up ESLint for NextJs
- Mutate after Fetch using React-Query
- React: Preserve cookies when redirecting to sub-domain
- call a function from another class in react
- Module parse failed: Unexpected character '@'You may need an appropriate loader to handle this file type.(Webpack : 4.4.0)
- Defining React CSSTransitionGroup animations with Stylus mixin
- React useRef Hook with Flow Typings
- How to make button 1 onClick to enable disabled button 2 in React?
- React Material-UI state not updating
- How to make transition in React to display new HTML content based on updated state?
- Create an Array from for each and array from in ES6
- material UI popover - position on small screen
- React router doesn't apply NavLink active class if the component has mapStateToProps
- Firebase onAuthStateChange return undefined when page refresh
- In React component, how to make <span> in a clickabel and call the function of this react component?
- Handling optional field in Typescript
- Why does the form not receive select data in AntD?
- Each child in a list should have a unique "key" prop, React
- React how to keep rendered components
- TypeError Cannot read property 'baseTheme' of undefined
- Javascript Node.js get all the specific array value
- Cannot get updated state value inside event handler
- Disqus's count.js script doesn't run properly in index.html with react.js website
- Using EnlighterJS in a React project
- How do I loop through my search results in React?
- How to mock a pdf Blob