How to initiate state from another state (by copying without referencing)

Question

I have a code as below

useEffect(() => {
    {
      updateLocalColumns();
    }
  }, []);

const updateLocalColumns = () => {
  let templocalColumns = [...localColumns];
  templocalColumns[0]..defaultSortOrder = "descend";
  setlocalColumns(templocalColumns);
}
const orderContext = useContext(OrderContext);
const { data, columns } = orderContext;
const [localColumns, setlocalColumns] = useState([...columns]);


return (
  <div>
    <Table columns={columns} dataSource={data} />
    {console.log(columns)}
  </div>
)

'columns' is a state that is obtained by using hooks, I am trying to make a copy over local component that is 'localColumns" and thus modify from there without interfering the global 'columns'

I was expecting the original columns to remain as its original state, however when I print out, the original columns is the same as 'localColumns' which is the modified one.

Expected Output

localColumns: [
    {
      title: "Username",
      dataIndex: "username",
      key: "username",
      defaultSortOrder: "descend"
    }
    ]

columns: [
    {
      title: "Username",
      dataIndex: "username",
      key: "username",
    }
    ]

Current Wrong Output

localColumns: [
    {
      title: "Username",
      dataIndex: "username",
      key: "username",
      defaultSortOrder: "descend"
    }
    ]

columns: [
    {
      title: "Username",
      dataIndex: "username",
      key: "username",
      defaultSortOrder: "descend"
    }
    ]

I am suspecting the problem is when I initate the state, I did a referencing.

The way I did copy was from this link and this link

Could you explain a bit deeper your problem? With examples of columns and localColumns. — chococroqueta, Jan 21 '21 at 09:12
'columns' is a state that is obtained by using hooks, I am trying to make a copy over local component that is 'localColumns" and thus modify from there wihout inteferring the global 'columns' — Wing Shum, Jan 21 '21 at 09:17
What I first notice is you should use "setlocalColumns" to update "localColumns" instead of directly updating it. — chococroqueta, Jan 21 '21 at 09:43
Hi, the way I set was from https://stackoverflow.com/questions/55987953/how-do-i-update-states-onchange-in-an-array-of-object-in-react-hooks , is this way wrong? because I have found no other way to set the array — Wing Shum, Jan 21 '21 at 09:57
Sorry, I went and refer back, and had made changes accordingly, however still having same problem. Amended my code, thank you — Wing Shum, Jan 21 '21 at 10:02
Try the code I wrote in the answers! I think your code is too complex for what you want to do, if I understood correctly. — chococroqueta, Jan 21 '21 at 10:10
You do need to make a deep copy. You could check how to make a deep copy without using a library, but ramda is working very well. — chococroqueta, Jan 21 '21 at 10:24

chococroqueta · Accepted Answer · 2021-01-21T10:14:11.567

I would try a simpler code:

//Import this class in the proper place
//import { clone } from 'ramda';

const orderContext = useContext(OrderContext);
const { data, columns } = orderContext;

let localColumns0 = clone(columns) //This is done to make a deep copy of "columns"

localColumns0[id]['defaultSortOrder']="descend"

const [localColumns, setlocalColumns] = useState(localColumns0);


return (
  <div>
    <Table columns={columns} dataSource={data} />
    {console.log(columns)}
  </div>
)

score 0 · Answer 2 · answered Jan 21 '21 at 09:13

If you don't want only the copy of the state, maybe you need to look how to do the deep copy of an array, after you make a deep copy of the estate you can pass the state to your personal component with <PersonalCom {...deepCopyStateObj}/> and the PersonalCom need a constructor where you receive the props, like the following code.

 constructor(props) {
    super(props);
 }

Or something equivalent in JSX syntax.

However make a deep copy of the state and pass the object to component don't look like, because you need to clone the state each time that your app refresh the UI, and react refresh very frequently the UI, for this reason, I suggest cloning the propriety that you need inside the personal component.

How to initiate state from another state (by copying without referencing)

2 Answers2