I have a todo list and want to set the state of that item in the array to "complete" if the user clicks on "complete".
Here is my action:
export function completeTodo(id) {
return {
type: "COMPLETE_TASK",
completed: true,
id
}
}
Here is my reducer:
case "COMPLETE_TASK": {
return {...state,
todos: [{
completed: action.completed
}]
}
}
The problem I'm having is the new state does no longer have the text associated of that todo item on the selected item and the ID is no longer there. Is this because I am overwriting the state and ignoring the previous properties? My object item onload looks like this:
Objecttodos: Array[1]
0: Object
completed: false
id: 0
text: "Initial todo"
__proto__: Object
length: 1
__proto__: Array[0]
__proto__: Object
As you can see, all I want to do is set the completed value to true.
You need to transform your todos array to have the appropriate item updated. Array.map is the simplest way to do this:
case "COMPLETE_TASK":
return {
...state,
todos: state.todos.map(todo => todo.id === action.id ?
// transform the one with a matching id
{ ...todo, completed: action.completed } :
// otherwise return original todo
todo
)
};
There are libraries to help you with this kind of deep state update. You can find a list of such libraries here: https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilities
Personally, I use ImmutableJS (https://facebook.github.io/immutable-js/) which solves the issue with its updateIn and setIn methods (which are more efficient than normal objects and arrays for large objects with lots of keys and for arrays, but slower for small ones).
New state does no longer have the text associated of that todo item on
the selected item and the ID is no longer there, Is this because I am
overwriting the state and ignoring the previous properties?
Yes, because during each update you are assigning a new array with only one key completed, and that array doesn't contain any previous values. So after update array will have no previous data. That's why text and id's are not there after update.
Solutions:
1- Use array.map to find the correct element then update the value, Like this:
case "COMPLETE_TASK":
return {
...state,
todos: state.todos.map(todo =>
todo.id === action.id ? { ...todo, completed: action.completed } : todo
)
};
2- Use array.findIndex to find the index of that particular object then update that, Like this:
case "COMPLETE_TASK":
let index = state.todos.findIndex(todo => todo.id === action.id);
let todos = [...state.todos];
todos[index] = {...todos[index], completed: action.completed};
return {...state, todos}
Check this snippet you will get a better idea about the mistake you are doing:
let state = {
a: 1,
arr: [
{text:1, id:1, completed: true},
{text:2, id:2, completed: false}
]
}
console.log('old values', JSON.stringify(state));
// updating the values
let newState = {
...state,
arr: [{completed: true}]
}
console.log('new state = ', newState);
One of the seminal design principles in React is "Don't mutate state." If you want to change data in an array, you want to create a new array with the changed value(s).
For example, I have an array of results in state. Initially I'm just setting values to 0 for each index in my constructor.
this.state = {
index:0,
question: this.props.test[0].questions[0],
results:[[0,0],[1,0],[2,0],[3,0],[4,0],[5,0]],
complete: false
};
Later on, I want to update a value in the array. But I'm not changing it in the state object. With ES6, we can use the spread operator. The array slice method returns a new array, it will not change the existing array.
updateArray = (list, index,score) => {
// updates the results array without mutating it
return [
...list.slice(0, index),
list[index][1] = score,
...list.slice(index + 1)
];
};
When I want to update an item in the array, I call updateArray and set the state in one go:
this.setState({
index:newIndex,
question:this.props.test[0].questions[newIndex],
results:this.updateArray(this.state.results, index, score)
});
Related
I am new to react. I have faced one issue and not able to solve it. I am looking for your help.
I have an array which I have listed below. All data are looped and displayed in the view. From my current array, I want to update the count of dietry array[] which is inside the fruits array.
This is my useState
const [foods, setFood] = useState(fruits)
if I console.log(foods) it gives data as below.
fruits: [
{
id: 1,
name: 'Banana',
family: 'abc',
price: 2.99,
isEnabled: true,
dietary: [
{
id:1,
disabled: false,
group: null,
selected: false,
text: 'N/A',
value: '858090000',
count:0
},
{
id:2,
disabled: true,
group: null,
selected: true,
text: 'N/A',
value: '80000',
count:0
},
}
This data are looped in a view page and there is onClick handleIncrement method which should increment the count of dietary array of index 0 or index1 etc whichever index sent from handleIncremnt() method.
This is my method
const handleIncrementCount = (dietary_index) => {
setFood(foods =>
foods.map((food,index) =>
dietary_index === food[index] ? {...food, qty:food.count+1}:food
)
);
}
I am not able to increase the count, in my view page counts are 0 even if i click the increment button.It shows some error within map
Any help is highly appreciated
I ma looking for a solutions
There are a few issues with your handleIncrementCount function. Firstly, you are trying to use the dietary_id parameter to find the correct food object to update, but you are using it to access the index property of the food object instead. This will always return undefined, and so the function will not be able to find the correct object to update.
Secondly, you are trying to update the qty property of the food object, but this property does not exist in the food object. Instead, you need to update the count property of the correct dietary object inside the food object.
Here is how you can fix these issues:
const handleIncrementCount = (dietary_id) => {
setFood(foods =>
foods.map(food => {
// Find the dietary object with the correct id
const dietary = food.dietary.find(d => d.id === dietary_id);
// If the dietary object was found, increment its count
if (dietary) {
dietary.count += 1;
}
// Return the updated food object
return food;
})
);
};
With this change, the handleIncrementCount function should be able to find the correct food object and update the count property of the correct dietary object.
Note that this function is using the Array.prototype.map() and Array.prototype.find() methods to transform the foods array and find the correct dietary object to update. These methods are commonly used in JavaScript to transform and find elements in arrays. It is worth reading up on these methods and understanding how they work in order to better understand this code.
I have an array of objects. In that array, I want to update a single object, and in that object, I want to update only specific properties. I tried:
setRequiredFields(prevRequiredFields => ([
...prevRequiredFields, prevRequiredFields.find(x => x.name = field) ? {
isValid: isValid,
content: content,
isUnchanged: false
}
]));
But it didn't work. Required fileds is an array with the following structure:
[{
name: "Name",
isValid: false,
content: "",
isUnchanged: true,
tip: "Name cannot be empty",
isValidCondition: notEmptyRegex,
reportState: validateField
}]
What I'm trying to do here is to update only a isValid, content and isUnchanged of one specific object inside that array. How can I accomplish that?
If you have an array of objects, and you want to update few properties of one of the objects inside the array. Then you could do something like this.
const index = state.findIndex(x => x.name === field);
if(index > -1) {
const newState = [...state];
newState[index] = {
...newState[index],
isValid: isValid,
content: content,
isUnchanged: false
}
setRequiredFields(newState);
}
Find the index of the object that you want to update.
Add properties inside that object.
Update the react state.
#interestingProblem can anybody explain, please 🤔
I had a problem while updating the state as in the first code block, but there was no problem when I updated the state as in the second code block as below.
I had a problem: (cannot assign to read-only property of object quantity)
const newItem = action.payload
newItem.quantity = 1
state.items = [...state.items, newItem]
I had no problem when I wrote the code like this
const newItem = action.payload
state.items = [...state.items, { ...newItem, quantity: 1 }]
the first approach you are mutating action.payload directly since you are not creating a copy to newItem but passing the same reference. Given action.payload is readonly you face the error:
// passing the same reference, 'newItem' points to 'action.payload'
// hence newItem is not copy
const newItem = action.payload
// here you mutate 'action.payload' since 'newItem' points to same reference
newItem.quantity = 1
state.items = [...state.items, newItem]
second approach works because you are creating a copy from action.payload not mutating it:
// here 'newItem' still points to same reference 'action.payload'
const newItem = action.payload
// but here you are spreading the values into a new object, not mutating directly
state.items = [...state.items, { ...newItem, quantity: 1 }]
instead you should create a copy first to your approach to work:
// here you create a new object from 'action.payload''action.payload'
// hence newItem contains the same values but it's a different object
const newItem = { ...action.payload }
// now you are not mutating 'action.payload', only 'newItem' that's a new object
newItem.quantity = 1
state.items = [...state.items, newItem]
action.payload might be a readonly object. On the second code block, the spread operator passes the key-value pairs to the new object.
Because when doing a like **kwargs with state in React I assume, you are passing a no nested state into one that has a nested state reassinging it to a non-nested stated breaking the goal of you're code.
I have a State of objects in an Array (in my Redux Reducer).
const initialState = {
items: [
{ id: 1, dish: "General Chicken", price: 12.1, quantity: 0 },
{ id: 2, dish: "Chicken & Broccoli", price: 10.76, quantity: 0 },
{ id: 3, dish: "Mandaran Combination", price: 15.25, quantity: 0 },
{ id: 4, dish: "Szechuan Chicken", price: 9.5, quantity: 0 }
],
addedItems: [],
total: 0
};
I have an action to add 1 to the quantity of an object, such as
{id:1, dish: Generals Chicken, price: 10.76, quantity:0}
when a button in clicked in Cart.jsx. Here's the first Reducer I tried using the spread operator:
case "ADD_QUANTITY":
let existing_item = state.addedItems.find(
item => action.payload === item.id
);
return {
...state,
addedItems: [
...state.addedItems,
{ ...existing_item, quantity: existing_item.quantity + 1 }
]
};
This didn't work, instead of adding 1 to the quantity, it added another object with the quantity set to 2. . .So, I tried using Map like this
case "ADD_QUANTITY":
return {
...state,
addedItems: state.addedItems.map(item =>
item.id === action.payload
? { ...item, quantity: item.quantity + 1 }
: item
)
};
And this worked correctly. My question is, why didn't the spread operator work? As far as I can tell, it should do the same thing as the Map?
The two pieces of code are quite different.
The first one creates a new array out of state.addedItems and the new object { ...existing_item, quantity: existing_item.quantity + 1 }, and then assigns that array to the addedItems property of the state.
The second piece of code iterates addedItems and if it finds an element with the same id as the payload, it creates a new object { ...item, quantity: item.quantity + 1 } and returns that one, instead of the original item from the array.
Thus, even though both approaches create a new array, the first one has an extra object compared to the original, while the second has an object with a modified property.
The spread syntax, when used in an array literal context, does not reproduce the keys (the indexes), but just the values. As opposed to the spread syntax in an object literal context, which produces key/value pairs. The latter allows previous entries to be overruled by a new entry, having the same key, but the first does not have this behaviour: it always spreads all values without regards for indexes.
When replacing an element in an array, while copying it, you need to:
know the index at which the substitution should be performed, and
ensure that the copy is an instance of Array, and not just a plain object
You can use findIndex and Object.assign([], ) for addressing those needs:
case "ADD_QUANTITY":
let index = state.addedItems.findIndex(
item => action.payload === item.id
);
existing_item = state.addedItems[index];
return {
...state,
addedItems: Object.assign([], state.addedItems, {
[index]: { ...existing_item, quantity: existing_item.quantity + 1 }
})
}
Its because in your spread example, its has no way to tell which object it should overwrite. So it doesn't operate quite the same as some other examples you might see. Consider the following:
If you had an object like this:
let test = { a: 'first', b: 'second' }
Then doing spread like this would work:
let newTest = {...test, b: 'third' }
The reason is you are specifying that b should be overwritten.
When you try to create the same effect with an array of objects, you can't specify the key. So what you're actually doing is just appending the new object to the end of the array.
In the map example, you are checking the object contents and returning a different object based on if it matches your condition, so you know which object to overwrite.
When reading React Cookbook I've stumbled upon a code snippet, this function gets called when user checks a task as completed in a TODO list:
markAsCompleted = id => {
// Finding the task by id...
const foundTask = this.state.items.find(task => task.id === id);
// Updating the completed status...
foundTask.completed = true;
// Updating the state with the new updated task...
this.setState({
items: [
...this.state.items,
...foundTask
]
});
}
UPD: Somehow I've completely missed the spread operator on foundTask. So what's really happening is the state gets updated with only ...this.state.items (which was mutated), and the ...foundTask part does not go into state, since it's not a valid spread.
At first it looked like it should add a new element to the items array, instead of updating, so I went to the JS console to check:
state = { items: [{id: '0', done: false}, {id: '1', done: false}] }
upd = state.items.find(obj => obj.id === '0') // {id: "0", done: false}
upd.done = true // also updates object inside the array
state = { items: [...state.items, upd] }
/* Indeed, adds a new element:
items: Array(3)
0: {id: "0", done: true}
1: {id: "1", done: false}
2: {id: "0", done: true}
*/
So then I've downloaded the code and ran it locally. And, to my surprise, it worked! State was getting updated without any trouble, no extra elements appeared. I used React DevTools to see the live state while testing.
I searched the web, but couldn't find any examples like in the book, but with a better explanation. Usually all solutions involve using .map() to build a new array, and then replace an existing one (e.g. https://stackoverflow.com/a/44524507/10304479).
The only difference I see between the book code snippet and console test is that React is using .setState(), so maybe this helps somehow. Can anyone help to clarify, why is it working?
Thanks!
Array.find will return the first value matched in the array. Here the array consist of objects and the value returned will be the reference to the object.
const foundTask = this.state.items.find(task => task.id === id);
Here foundTask will have reference to the same object contained in the state.items. So when you modify foundTask you're modifying the same object as in state.items.
For example,
If this.state.items is [{ id: 1 }] and if you do
const foundTask = this.state.items.find(obj => obj.id === 1);
foundTask.id = 2;
console.log(this.state.items); // [{ id:2 }]
In the code,
this.setState({
items: [
...this.state.items,
...foundTask
]
});
This will update the state with updated completed value for the task.
...foundTask will give you an error in the console since foundTask will be an object and you're spreading it in an array.
Here not having ...foundTask will produce same result. Perhaps not with an error.