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

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

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 } };

Stack Overflow Q#50752987, score: 602