I have state that contains an object that looks something like this
stateObject = {0: 400, 1: 500, 2: 600}
On componentWillUpdate my component rerenders and an extra component (column) is added in and carries over the 0 key index value (400).
I want to set the new state to look like the state down below, so that the original values are kept but are equal to the incremented index keys (this is so the newest column doesn't carry over the value 400 and the next column which was the original column has the correct value)
ex. 0: 400 would now equal to 1:400, 1:500 would now equal 2:500 etc. This would allow the correct columns to have the correct values that they need
newStateObject = {0: undefined, 1: 400, 2: 500, 3: 600}
What is the best way to approach this? I've tried using Object.assign to create a new object that matches this desired object structure and setting that to state but I can't get it to work.
Any help or advice is appreciated!
Considering obj to be the previous state Object in the callback representation of this.setState(prevState => {}),the following should work.Note that i am not adding the {0:undefined} because that is redundant
const obj = {0: 400, 1: 500, 2: 600}
const keys = Object.keys(obj)
const incrementedArray = keys.map(key => ({[`${Number(key)+1}`]:obj[key]}))
const incrementedObject = incrementedArray.reduce((map,obj)=>({...map,...obj}),{})
console.log('incrementedObject',incrementedObject)
Easiest would be if you store the state as an array. 0, 1, 2, 3 seem to be used as index anyway. When using an array you can prefix undefined easily.
// current state is [400, 500, 600]
// 0 1 2
setState(state => [undefined, ...state])
// new state will be [undefined, 400, 500, 600]
// 0 1 2 3
This can be a solution to reach what you want, i can’t figure out now, but i think it can be implemented better.
const [stateObj, setStateObj] = useState({0: 400, 1: 500, 2: 600});
const onClick = useCallback((firstIdxValue) => {
setStateObj((prevValue) => {
const data = [firstIdxValue, …Object.values(prevValue)];
return data.reduce((prev, cur, idx) => {
return {…prev, [idx] : cur};
}, { })
});
},[setStateObj]);