Goal :
Within a React App, understand how to correctly update a boolean value that is stored within an array in state.
Question :
I am not sure if my code is correct in order to avoid asynchronous errors (whether or not it works in this case I am not interested in as my goal is to understand how to avoid those errors in all cases). Is there some syntax that is missing in order to correctly create a new state?
Context :
Creating a todo list within React.
My state consists of an array labeled itemsArr with each array element being an object
The objects initialize with the following format :
{ complete : false, item : "user entered string", id : uuid(), }
Upon clicking a line item, I am calling a function handleComplete in order to strikethrough the text of that line by toggling complete : false/true
The function is updating state via this :
handleComplete(id){
this.setState(state =>
state.itemsArr.map(obj => obj.id === id ? obj.complete = !obj.complete : '')
)
}
Additional Details :
One of my attempts (does not work) :
handleComplete(id){
const newItemsArr = this.state.itemsArr.map(obj =>
obj.id === id ? obj.complete = !obj.complete : obj);
this.setState({ itemsArr : newItemsArr })
}
In both snippets you haven't correctly returned a new object from the .map callback:
handleComplete(id){
const newItemsArr = this.state.itemsArr.map(obj =>
obj.id === id ? { id: obj.id, complete: !obj.complete } : obj);
this.setState({ itemsArr : newItemsArr });
}
Your function, as mentioned above, returns and updates wrong data, by adding new elements in your state instead of updating your current array.
Since array.map() returns an array, you can assign it to the state array, itemsArr.
You should also replace the change condition by updating the element's value first, and then returning it, if its id matches,or else, simply leave it as is.
handleComplete=(id)=>{
this.setState(state =>{
itemsArr:state.itemsArr.map(obj => obj.id === id
? (obj.complete = !obj.complete,obj) //update element's complete status and then return it
: obj) //return element as is
},()=>console.log(this.state.itemsArr)) //check new state
}
live example using your data : https://codepen.io/Kalovelo/pen/KKwyMGe
Hope it helps!
state = {
itemsArr: [
{
complete: false,
item: 'iemName',
id: 1
},
{
complete: false,
item: 'iemName',
id: 2
}
]
}
handleComplete = (id) => {
let { itemsArr } = { ...this.state };
itemIndex = itemsArr.findIndex(item => id === item.id);
itemsArr[itemIndex]['complete'] = !itemsArr[itemIndex]['complete'];
this.setState{itemsArr}
}
Related
I am on the newer side of React and trying to change the state of an object in an array. Currently, I am pulling the object out of the array, changing the property in that object, then adding the new object to the state again. Problem being that it sends the object to the back of the list and reorders my checkbox inputs.
const handleChange = (e) => {
if (e.target.type === "checkbox") {
// Get the role from the current state
const roleToChange = input.roles.find(
(role) => Number(role.id) === Number(e.target.id)
);
// Change checked state to opposite of current state
const changedRole = { ...roleToChange, checked: !roleToChange.checked };
// Get every role except the one that was changed
const newRoles = input.roles.filter(
(role) => Number(role.id) !== Number(e.target.id)
);
// Update the role in the state
setInput((prevState) => {
return { ...prevState, roles: [...newRoles, changedRole] };
});
}
Can I update the object in the array in-place so this doesn't happen?
Don't .filter - .map instead, and return the changed object in case the ID matches, so the new object gets put at the same place in the new array as it was originally.
const handleChange = (e) => {
if (e.target.type !== "checkbox") {
return;
};
const newRoles = input.roles.map((role) =>
Number(role.id) !== Number(e.target.id)
? role
: { ...role, checked: !role.checked }
);
setInput((prevState) => {
return {
...prevState,
roles: newRoles
};
});
}
Unless the state is updated synchronously before this, which sounds a bit unlikely (but not impossible), you can also probably use setInput({ ...input, roles: newRules }) instead of the callback.
If you have an array as part of your state, and that array contains objects, whats an easy way to update the state with a change to one of those objects?
Example, modified from the tutorial on react:
var CommentBox = React.createClass({
getInitialState: function() {
return {data: [
{ id: 1, author: "john", text: "foo" },
{ id: 2, author: "bob", text: "bar" }
]};
},
handleCommentEdit: function(id, text) {
var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
var updatedComments = ??; // not sure how to do this
this.setState({data: updatedComments});
}
}
I quite like doing this with Object.assign rather than the immutability helpers.
handleCommentEdit: function(id, text) {
this.setState({
data: this.state.data.map(el => (el.id === id ? Object.assign({}, el, { text }) : el))
});
}
I just think this is much more succinct than splice and doesn't require knowing an index or explicitly handling the not found case.
If you are feeling all ES2018, you can also do this with spread instead of Object.assign
this.setState({
data: this.state.data.map(el => (el.id === id ? {...el, text} : el))
});
While updating state the key part is to treat it as if it is immutable. Any solution would work fine if you can guarantee it.
Here is my solution using immutability-helper:
jsFiddle:
var update = require('immutability-helper');
handleCommentEdit: function(id, text) {
var data = this.state.data;
var commentIndex = data.findIndex(function(c) {
return c.id == id;
});
var updatedComment = update(data[commentIndex], {text: {$set: text}});
var newData = update(data, {
$splice: [[commentIndex, 1, updatedComment]]
});
this.setState({data: newData});
},
Following questions about state arrays may also help:
Correct modification of state arrays in ReactJS
what is the preferred way to mutate a React state?
I'm trying to explain better how to do this AND what's going on.
First, find the index of the element you're replacing in the state array.
Second, update the element at that index
Third, call setState with the new collection
import update from 'immutability-helper';
// this.state = { employees: [{id: 1, name: 'Obama'}, {id: 2, name: 'Trump'}] }
updateEmployee(employee) {
const index = this.state.employees.findIndex((emp) => emp.id === employee.id);
const updatedEmployees = update(this.state.employees, {$splice: [[index, 1, employee]]}); // array.splice(start, deleteCount, item1)
this.setState({employees: updatedEmployees});
}
Edit: there's a much better way to do this w/o a 3rd party library
const index = this.state.employees.findIndex(emp => emp.id === employee.id);
employees = [...this.state.employees]; // important to create a copy, otherwise you'll modify state outside of setState call
employees[index] = employee;
this.setState({employees});
You can do this with multiple way, I am going to show you that I mostly used. When I am working with arrays in react usually I pass a custom attribute with current index value, in the example below I have passed data-index attribute, data- is html 5 convention.
Ex:
//handleChange method.
handleChange(e){
const {name, value} = e,
index = e.target.getAttribute('data-index'), //custom attribute value
updatedObj = Object.assign({}, this.state.arr[i],{[name]: value});
//update state value.
this.setState({
arr: [
...this.state.arr.slice(0, index),
updatedObj,
...this.state.arr.slice(index + 1)
]
})
}
I have the following state in my app:
const [education, setEducation] = useState([
{
institution: "University",
area: "President",
studyType: "Bachelor",
startDate: "2013-01-01",
endDate: "2014-01-01",
gpa: "4.0",
courses: ["DB1101 - Basic SQL"],
},
]);
And the following method to update the state:
const onCoursesChange = (newValue, index) => {
const newValuesArr = newValue ? newValue.map(item => item.value) : [];
setEducation((prev)=>(
prev[index].courses=newValuesArr
));
//setEducation(education[index].courses = newValuesArr);
console.log(education[index].courses)
};
With the above code I get the error Cannot create property 'courses' on string 'asdfa' when the array newValuesArr has more than one element.
How do I update the state ??
The problem is here:
setEducation((prev)=>(
prev[index].courses=newValuesArr
));
prev[index].courses=newValuesArr is an assignment that simply returns the value being assigned, here newValuesArr. This is an array of strings, so its elements do not have the properties you expect.
Your state-updating function (the one passed to setEducation) instead needs a return the whole of prev, with the update you desire. And this should be done immutably - that is, without updating prev. Luckily, ES6 offers nice tools for doing this. Here is how you can do it in this case:
setEducation((prev)=>(
prev.map((item, oldIndex) => oldIndex === index ? { ...item, courses: newValuesarr } : item )
));
That is, it maps through the array prev, and leaves all unchanged apart from the one with the matching index, and in that one updates the courses property to the desired array.
I am using redux-saga and immutable.js in my react app.
I have notifications array holds the data of every notification created by redux actions for whole app.
My immutable redux store and notifications array is like this :
global :
notifications:
0:
key: 21339298 // random key to use like id
show: true
type: success
message: Operation was successfull
1: {key..., show...}
...
I want to find a single notification by "key" and update it's "show" value to false.
I read immutable.js documentation but it is very difficult to understand.
So i tried below code snippets. But i didn't get a result.
return state
.updateIn(['notifications',
ns => ns.findIndex(function (item) {
return item.get("key") === action.notificationId;}
), 'show'], false
);
return state
.update(
list.findIndex(function (item) {
return item.get("key") === action.notificationId;
}), function (item) {
return item.set("show", false);
}
);
How can i find an item and update its some value ?
Solution is to seperate find index and update, first finding index and then using it with setIn. Below is the solution.
case NOTIFY_HIDE:
let notifications = state.get('notifications');
let notificationIdx = notifications.findIndex(function (item) {
return item.get('key') === action.notificationId;
});
return state
.setIn(['notifications', notificationIdx, 'show'], false);
I have a todo list that holds a delete button in a grandchild, that when clicked fires an event in the parent - I am wanting this event to delete the array entry corresponding to the grandchild clicked.
Parent (contains the array and my attempt at the function)
const tasks = [
{ name: 'task1', isComplete: false },
{ name: 'task2', isComplete: true },
{ name: 'task3', isComplete: false },
]
// taskToDelete is the name of the task - doesn't contain an object
deleteTask(taskToDelete) {
this.state.tasks.remove(task => task.name === taskToDelete);
this.setState({ tasks: this.state.tasks });
}
Any help would be appreciated
Two issues there:
You're seeming to try to direct modify this.state.tasks. It's important not to do that, never directly modify this.state or any object on it. See "Do Not Modify State Directly" in the React documentation for state.
You're passing an object to setState that is derived from the current state. It's important never to do that, too. :-) Instead, pass setState a function and use the state object it passes you when calling that function. From "State Updates May Be Asynchronous" in the documentation:
Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state... [Instead]...use a second form of setState() that accepts a function rather than an object.
(my emphasis)
I figure your remove on an array was intended to be hypothetical, but for the avoidance of doubt, arrays don't have a remove method. In this case, the best thing to do, since we need a new array, is to use filter to remove all entries that shouldn't still be there.
So:
deleteTask(taskToDelete) {
this.setState(prevState => {
const tasks = prevState.tasks.filter(task => task.name !== taskToDelete);
return { tasks };
});
}
You could simply filter the array :
this.setState(prevState => ({
tasks: prevState.tasks.filter(task => task.name !== 'taskToDelete')
}));
Also when updating based on this.state, its better to use the function form because setState is async.
You can use filter to remove one object from an array following the immutable pattern (filter will create a new array) :
deleteTask(taskToDelete) {
const newTaskArray = this.state.tasks.filter(task => task.name !== taskToDelete);
this.setState({ tasks: newTaskArray });
}
Edit : codepend of the solution : https://codepen.io/Dyo/pen/ZvPoYP
You can implement deleteTask method as below:
deleteTask(taskToDelete) {
this.setState((prevState, props) => {
const tasks = [...prevState.tasks];
const indexOfTaskToDelete = tasks.findIndex(
task => task.name === taskToDelete
);
tasks.splice(indexOfTaskToDelete, 1);
return { tasks };
});
}
A. Find the index of taskToDelete.
B. Then use splice method to delete the item from the collection
C. Then call setState to update the state with tasks.
You can use higher order function Array#filter to delete the task.
let updatedTasks = this.state.tasks.filter(task => task.name !== taskToDelete);
this.setState({ tasks: updatedTasks });
I have followed below steps to delete a particular selected Object from the state array:
Here I am using a list of checkBoxes, when I am selecting a checkBox it will add it in the state array and when it gets de-selected then it will get deleted from the array.
if (checked) {
var tempObject = { checkboxValue: data, label: title }
this.state.checkBoxState.push(resTemp);
} else {
var element = data; //data is coming from different method.
for (let index = 0; index < this.state.checkBoxState.length; index++) {
if (element === this.state.checkBoxState[index].checkboxValue) {
this.state.checkBoxState.splice(index, 1);
}
}
}
I got stuck for this question and I am sharing my solution. Hope it will help you.