How to update specific object property in React state - reactjs

Question

I'm trying to make my code more concise and therefore removed all of these from separate useState hooks and put them into one. But I'm now trying to update the visible property of the objects based on a toggle state. I've attempted I've looked through different answers about immutable state / mapping through object etc. But it's confusing me even more. What do I put in between my function to change state on toggle change?
const [columnsVisible, setColumnsVisible] = useState({
column1: { visible: true },
column2: { visible: true },
column3: { visible: true },
column4: { visible: true },
});
const changeColumnVisibility = () => {
}
return(
{columnsVisible.column1.visible &&
(
<Column
<>
{toOrderState.map((job, index) => (
<JobCard
job_number={job.jobNumber}
time={job.time}
/>
))}
</>
/>
)}
)

Answer 1

One option to achieve immutability is by using Spread operator. As an example:
const myObject = { a: 1, b: 'some text', c: true };
const myCopy = { ...myObject };
results in myCopy being identical to myObject but changing myCopy (e.g. myCopy.a = 2) will not change myObject.
Now extend that so that myObject has more complex stuff in it instead of just an integer or a boolean.
const myObject = { a: { visible: true, sorted: 'ASC' } };
const myCopy = { ...myObject };
The thing here is that if you change myCopy's visible (for example, myCopy.a.visible = false) you will be changing myObject (myObject.a.visible will also be false even though you haven't explicitly changed myObject).
The reason for the above is that the Spread operator is shallow; so when you are making a copy of a you really are making a copy of the reference to the original a ({ visible: true, sorted: 'DESC' }). But guess what, you can use the Spread operator for copying a.
const myObject = { a: { visible: true, sorted: 'ASC' } };
const myCopy = { a: { ...myObject.a } };
Before addressing specific question, there is one more interesting thing about the Spread operator... you can overwrite some of the copied values simply by adding a key to the new object
const myObject = { a: 1, b: 'some text', c: true };
const myCopy = { ...myObject, a: 2 };
with the above, myCopy.a will be 2 rather than `1.
So now think about what needs to change when changeColumnVisibility is called... you want to change one of the column details but not the others
const [columnsVisible, setColumnsVisible] = useState({
column1: { visible: true },
column2: { visible: true },
column3: { visible: true },
column4: { visible: true },
});
// columnName is either `'column1'`, `'column2'`, ...
const changeColumnVisibility = (columnName) => {
setColumnsVisible((currentColumnsVisible) => {
const isVisible = currentColumnsVisible[columnName].visible;
return {
...currentColumnsVisible,
[columnName]: { ...currentColumnsVisible[columnName], visible: !isVisible }
};
});
}
[columnName] is important to be used so that you actually end up setting column1 or column2 or whatever rather than adding an attribute called columnName.
The final thing to call out from the snippet is that I'm using setColumnsVisible with a callback to ensure that the values are changed correctly rather than using columnsVisible directly.
Hope this helps