I have a two selection list from where i can select the value
list one= "A", "B"
list two = "C", "D", "E", "F"
I have a state in react
const [filterTags, setFilterTags] = useState({ one: [], two: [] });
I can pass one val at a time from any of the list in updateValue(val)
I need to update the filterTags in such a vay that if its val is from list one that is A or B it should update the state like this
{first:["A"]: second:[]} ,
If I pass the same value again it should delete the value and update it kind of checking and unchecking
the below code can add new values if they are not present but if they are present it does nothing .. it should remove the value if they are present
const updateValue = (val) => {
setFilterTags((prev) => {
const key = val === 'A' || val === 'B' ? 'first' : 'second';
return prev[key].includes(val)
? prev
: { ...prev, [key]: [...prev[key], val] };
});
};
few usecase are
if I pass A C C D B A E C one by one it should update the array with the unique values and the output should be
{first:["A"]: second[]} //passing A
{first:["A"]: second["C"]} //passing C
{first:["A"]: second:[]} // same since C is already there it removes and update
{first:["A"]: second["D"]} //passing D
{first:["A","B"]: second:["D"]} //passing B
{first:["B"]: second:["D"]} //same since A is already present it removes "A" on passing A
{first:["B"]: second:["D","E"]} //passing E
{first:["B"]: second:["D","E","C"]}// final output on passing C
it should update the respective element with unique values if not present and delete the values if present right now the above code can just update a the unique values
The reason your code isn't working is you're missing a filter() that removes the value. You can use a simple helper function toggleVal() that performs the toggle logic including the filter() then returns the updated list.
const oneVals = ["A", "B"];
const twoVals = ["C", "D", "E", "F"];
const [filterTags, setFilterTags] = useState({ one: [], two: [] });
const toggleVal = (possibleVals, list, value) => {
if (!possibleVals.includes(value)) {
return list;
}
return list.includes(value)
? list.filter(val => val !== value)
: [...list, value];
};
const updateValue = (value) => {
setFilterTags(({ one, two }) => ({
one: toggleVal(oneVals, one, value),
two: toggleVal(twoVals, two, value)
}));
};
I made some changes to your code - instead of using a ternary operator which is confusing in more complex situations I opted for an if statement.
I cleaned up the key selector.
The way you delete values from an object (which an secretly is) is you write delete followed by a reference to the key you desire to remove.
const updateValue = (val) => {
setFilterTags((prev) => {
const key = ['A', 'B'].includes(val) ? 'first' : 'second';
if (prev[key].includes(val)) {
// clone the current key you are using because don't mutate state.
let prevClone = {
...prev[key]
}
// delete the desired key
delete prevClone[prevClone.indexOf(val)]
// return the whole state, with the mutation.
return {
...prev,
[key]: prevClone
}
} else {
// else just add it.
return {
...prev,
[key]: [...prev[key], val]
};
}
});
};