eslint: no-case-declaration - unexpected lexical declaration in case block - reactjs

Question

What is the better way to update state in this context inside a reducer?
case DELETE_INTEREST:
let deleteInterests = state.user.interests;
let index = deleteInterests.findIndex(i => i == action.payload);
deleteInterests.splice(index, 1);
return { ...state, user: { ...state.user, interests: deleteInterests } };
ESLint doesn't like let statements inside case blocks inside a reducer, getting:
eslint: no-case-declaration - unexpected lexical declaration in case
block

Answer 1

ESLint doesn't like let statements inside case blocks inside a
reducer, Why?
This is discouraged because it results in the variable being in scope outside of your current case. By using a block you limit the scope of the variable to that block.
Use {} to create the block scope with case, like this:
case DELETE_INTEREST: {
let .....
return (...)
}
Check this snippet:
function withOutBraces() {
switch(1){
case 1:
let a=10;
console.log('case 1', a);
case 2:
console.log('case 2', a)
}
}
function withBraces() {
switch(1){
case 1: {
let a=10;
console.log('case 1', a);
}
case 2: {
console.log('case 2', a)
}
}
}
console.log('========First Case ============')
withOutBraces()
console.log('========Second Case ============')
withBraces();
For deleting the element from array, use array.filter, because splice will do the changes in original array. Write it like this:
case DELETE_INTEREST:
let deleteInterests = state.user.interests;
let newData = deleteInterests.filter(i => i !== action.payload);
return { ...state, user: { ...state.user, interests: newData } };

Answer 2

try to encapsulate the inside the case with {}
like this look simple example
case EnumCartAction.DELETE_ITEM: {
const filterItems = state.cart.filter((item) => item._id !== action.payload)
return {
...state,
cart: filterItems
}
}

Answer 3

An easy fix is to use brackets {} to encapsulate your case code.
If you're using return you might need to add break in some cases.