I have this state in my React component-->
const [employeeState, setEmployee] = useState({
"empName": null,
"Age": null,
"depts": [], //depts is an array of objects
"groups": [] //group is an array of objects
});
I have a separate state for depts and groups like follows -->
const depts = {
"name": "some name",
"code": "s123",
}
const [deptState, setDeptState] = useState([
{ ...depts},
]);
same is for groups too....
Now when I am trying to set the employee state on some btn click like below it's not updating and keeping depts and groups property as it is empty -->
const deptsLst = [...deptState];
const groupsLst = [...groupstate];
console.log(depsLst); // this will print the results as expected
console.log(groupsLst); // this will print the results as expected
setEmployee({
...employeeState,
['depts']: deptsLst ,
['groups']: groupsLst ,
})
console.log(employeeState);// this will show depts and groups as empty only
I am new to this spread variable copying concept. What am I doing wrong here?
You state that "I am new to this spread variable copying concept"...not only are you new to the spread operation but your code demonstrates that you do not have a basic understanding of it I think. You are using spread operators on top of spread operators on top of computed property names, all for no reason.
You are also using React state to manage the employee object and then using React state to manage Array properties on the employee object. If you are already performing state management on the employee object, why maintain state of individual properties?
Ok a couple breakdowns of your code:
const depts = {
"name": "some name",
"code": "s123",
}
const [deptState, setDeptState] = useState([
{ ...depts},
]);
Above you clone an object for no reason.
With React state management you only need to clone objects to trigger a render event. A clone creates a new object with a new reference in memory, will "react" to object reference changes and trigger a state change event. React is not capable of watching every property of a complex object, especially array elements to see if a value has changed.
The below code will suffice, you are initializing state, you do not need to clone:
const [deptState, setDeptState] = useState([{
"name": "some name",
"code": "s123",
}]);
Next this code:
setEmployee({
...employeeState,
['depts']: deptsLst ,
['groups']: groupsLst ,
})
Here you are attempting to use the spread operator to clone the "employeeState" object and update new values for the depts property key and groups property key. You use "Computed Property Names' for property keys for no reason.
This is sufficient:
setEmployee({
...employeeState,
depts: deptsLst ,
groups: groupsLst
})
You also create unnecessary state:
const [deptState, setDeptState] = //..rest of code omitted
Here you do not realize React state changes happen async:
setEmployee({
...employeeState,
['depts']: deptsLst ,
['groups']: groupsLst ,
})
console.log(employeeState);
The above code actually has changed the employeeState, just not be the time of your console.log(employeeState);
Ok, so to start I have created a CodePen for you to understand how state changes.
When you want to change state for this employee object of yours you simply need to change the object property values or add new property values and then clone the employee object to change its reference and than call setState with the clone, consider this object state:
const [employee, setEmployee] = React.useState({
"empName": 'Jane Doe',
"Age": 33,
"depts": [
{
"name": "some name",
"code": "s123",
}
]
});
Here I am adding a department to the employee, note I only clone the employee object to trigger React to detect the overall object reference change, React does not know I changed property depts array but the new state does have my new value I pushed on the department array:
function exampleUpdatingEmployee() {
employee.depts.push({
"name": "some new dept",
"code": "876",
});
setEmployee({ ...employee });
}
You can do:
setEmployee({
...employeeState,
depts: deptsLst,
groups: groupsLst
})
to update your employeeState. You probably won't see the update with the console.log you have right after that since it will execute before the state updates. You can verify that the employeeState updated by using a useEffect function like this:
useEffect(() => {
console.log(employeeState)
}, [employeeState])
The spread operator is the ES6 way of copying arrays without passing a reference to your copy so you can modify one array without those changes showing up in the other array. You can read into that more here: Reference And Copying Objects & Arrays.
if depts and group are arrays of objects, you should use spread operator in this way to copy values:
setEmployee({
...employeeState,
depts: [...deptState],
groups: [...groupstate]
});
so if:
const employeeState = {status: 'hungry'};
const deptState = ['one', 'two'];
const groupstate = ['y', 'k', 'o'];
then the first code, after spread, is like:
setEmployee({
status: 'hungry',
depts: ['one', 'two'],
groups: ['y', 'k', 'o']
});
Related
I have a deeply nested JSON object as state initially made with useState hook -
const [template, setTemplate] = useState([
{
statement: 'this is top level statement',
nestingLevel: 0,
children: [
{
nestingLevel: 1,
statement:
'this is a statement with such a template',
children: [
{
statement: 'first chart',
nestingLevel: 2,
},
{ statement: 'second chart',
nestingLevel: 2,
},
],
},
],
},
{
statement:
'this is second statement for section with such a metric {{}}',
nestingLevel: 0,
},
]);
I have an input element with an onChange handler.
As you can see, whenever there is some change in the input text, I update some relevant key-value pair based on path. I do so by using the lodash library's get and set functions.
const handleDataChange = (e, path) => {
console.log('handling the data');
// copy the template
let templateCopy = template;
// create the new object with updated information
const tempObj = _.set(
templateCopy,
`${path}['statement']`,
e.target.value,
);
setTemplate([...tempObj]);
};
The problem is in the handleDataChange function. When I do setTemplate(tempObj) the state doesn't get updated. However when I do setTemplate([...tempObj])(which will essentially yield the same result), this later solution works as expected.
I want to know why that is the case. Is it because lodash gives results always as object and destructuring and repacking it make it array again and hence it works as expected?
The object reference stays the same when you mutate nested property only, and as react does shallow comparison in order to detect changes, it won't react to the change.
You can deepClone the object, then mutate it as you do with set and then update the state.
I'm trying to add object inside an object with id as a key in react provider. Following is the use case.
const [memberList, setMemberList] = useState({
homeTeam: [],
awayTeam: [],
homeTeamClone: {},
});
I can successfully add member to an array, however I'm more keen to add that in homeTeamClone object.
example of object = {"id":"3a21b0a-1223-46-5abe-67b653be5704","memberName":"Adam"}
I want final result as
homeTeamClone: {
"3a21b0a-1223-46-5abe-67b653be5704": {"id":"3a21b0a-1223-46-5abe-67b653be5704","memberName":"Adam"},
"3a21b0a-1223-46-5abe-67b653be5705": {"id":"3a21b0a-1223-46-5abe-67b653be5705","memberName":"Chris"},
"3a21b0a-1223-46-5abe-67b653be5706": {"id":"3a21b0a-1223-46-5abe-67b653be5706","memberName":"Martin"},
}
I tried Object.assign(homeTeamClone, member) but did not get the expected result.
Thanks in Advance.
If the question is how to set individual member than you can do this:
const member = { id: '3a21b0a-1223-46-5abe-67b653be5704', memberName: 'Adam' };
setMemberList({
...memberList,
homeTeamClone: {
...memberList.homeTeamClone,
[member.id]: member,
},
});
In this case spread all old values and add new one. (In case user with same ID is added again, object value will be from the new one)
I have a dialog component that has a student_list props and this dialog is being triggered by a watcher, So basically, in my main component when I increment variable dialog_watcher++, the dialog opens.
The student_list props contains data which looks like this:
student_list = [
{id: 1, name: 'John'},
{id: 2, name: 'Jane'},
{id: 3, name: 'Jake'},
{id: 4, name: 'Finn'},
]
Now in the Dialog component, In my watch:{} hook, I have a variable student_list_data where I assigned the value of the student_list props..
watch: {
let temp = this.student_list;
this.student_list_data = temp;
}
Now, in the Dialog component, I have a button where I splice some object in the student_list_data array.
_selectStudent(item) {
//remove the selected student from the array
const index = this.student_list_data.findIndex(obj => obj.id == item.id);
this.student_list_data.splice(index, 1);
//append the selected student to a new array
this.selected_student.push(item);
}
Now, when I inspect in my vue devtools, I noticed that not only the student_list_data are being spliced, but also the student_list props. I checked everywhere but I dont have any function that splices data to student_list props.
Any idea where I went wrong?
When the non-primitive variables are assigned using "=", the reference will also be copied. This may lead to the mutation for all the variables that a particular object is assigned to.
Try the following.
You can use JSON.stringify to convert it to string and then parse into JSON.parse.
this.student_list_data = JSON.parse(JSON.stringify(this.student_list));
You can use spread operator.
this.student_list_data = [...this.student_list_data]
You are cloning the student_list wrongly. Try with this.
watch: {
this.student_list_data = [... this.student_list];
}
I have a value in my react state that looks like so:
appointmentsData = {
"05-01-2018": [
{
id: "1",
friendly: "9:00am - 10:00am",
openDateTime: "9:00am",
closeDateTime: "10:00am"
}
]
};
I have a new piece of data:
const newAppt = {"06-30-2018":[]}
How do I addon to my data in the state? I tried
this.setState({ ...this.state.appointmentsData, ...newAppt});
It seems to no be adding onto state though. I get back the same value in the render as before (appointmentData before spread). The newAppt never gets added to the state.
I am trying to get my states desired output to be:
appointmentsData = {
"05-01-2018": [
{
id: "1",
friendly: "9:00am - 10:00am",
openDateTime: "9:00am",
closeDateTime: "10:00am"
}
],
"06-30-2018": []
};
Many ways to do it, really. Here's one:
this.setState(prevState => (
{appointmentsData: {...prevState.appointmentsData}, newAppt}
));
Though your approach should work too, if you just add the appointmentsData: first. Like so:
this.setState({appointmentsData: {...this.state.appointmentsData, ...newAppt}});
This will spread all the previous values into a new object, plus the one you want to add.
I personally always use the functional way of setting the state when the new one depends on a previous state value, but your way is fine here too.
You should not use spread operator on newAppt. Just go with:
this.setState({ ...this.state.appointmentsData, newAppt});. It seems to me that the spread operator on newAppt is not getting any data for the const.
So I have the following object structure:
const SamplePalette = {
id: 1,
name: "Sample Palette",
description: "this is a short description",
swatches: [
{
val: "#FF6245",
tints: ["#FFE0DB", "#FFA797"],
shades: ["#751408", "#C33F27"]
},
{
val: "#FFFDA4",
tints: ["#FFFFE1"],
shades: ["#CCCB83"]
},
{
val: "#BFE8A3",
tints: ["#E7FFD7"],
shades: ["#95B77E"]
}
]
}
Let's imagine that this object is managed by the state of my app like this:
this.state = {
currentPalette: SamplePalette,
}
My question is how would I go about updating the val property of a given swatch object in the swatches array? Or more generally - how do I only update pieces of this object?
I tried using the update helper as well as to figure out how Object.assign() works, however I've been unsuccessful and frankly can't really grasp the syntax by just looking at examples.
Also, since I'm going to be modifying this object quite a lot, should I look into maybe using Redux?
[EDIT]
I tried #maxim.sh suggestion but with no success:
this.setState(
{ currentPalette: {...this.state.currentPalette,
swatches[0].val: newValue}
})
Consider you have new new_swatches
I think the clearer way is to get array, update it and put back as:
let new_swatches = this.state.currentPalette.swatches;
new_swatches[0].val = newValue;
this.setState(
{ currentPalette:
{ ...this.state.currentPalette, swatches: new_swatches }
});
Also you have : Immutability Helpers or https://github.com/kolodny/immutability-helper
Available Commands
{$push: array} push() all the items in array on the target.
{$unshift: array} unshift() all the items in array on the target.
{$splice: array of arrays} for each item in arrays call splice() on the target with the parameters provided by the item.
{$set: any} replace the target entirely.
{$merge: object} merge the keys of object with the target.
{$apply: function} passes in the current value to the function and updates it with the new returned value.