how to remove comments in nested arrays using useReducer?

Question

i use useReducer + useContext to change global state, please tell me how to remove comments using useReducer

interfaces

interface image

data array

export const listsData:IData[] = [
  {
    id: 'list-1',
    listTitle: 'TODO',
    cards: [
      {
        id: 'card-1-1',
        cardTitle: 'card title 1',
        cardDescription: 'description 1',
        cardComment: [
          {
            id:'card-1-comment-1',
            commentText:'commentTitle'
          }
        ],
        modalOpen: false
      }
    ]
  }
]

actions & useReducer

type DataAction =
  | { type: 'REMOVE_COMMENT', payload: { comment: IComment, list: IData, card: ICards, } }
case 'REMOVE_COMMENT':
      return {
        ...state, datass: state.datass.map(el=>{
          if (el.id === action.payload.list.id) {
            el.cards.map(el=>{
              if (el.id === action.payload.card.id) {
                el.cardComment.filter(el => {
                  return el.id !== action.payload.comment.id
                })
              }
            })
          }
          return el
        })
      }

Answer 1

maybe it will be useful for someone

case 'REMOVE_COMMENT':
      return {
        ...state,
        datass: state.datass.map((el:IData) => ({
          ...el,
          cards: el.cards.map((el:ICards) => ({
            ...el,
            cardComment: el.cardComment.filter((el:IComment) => {
                return el.id !== action.payload.comment.id
              }
            )
          }))
        }))
      }