Bug delete el on array

Question

My function is constantly removing the last element of the array, although I added a check by index

DelCategory it's popup, useState del responsible for rendering the popup

When clicking on DelCategory onClick = {delCatC}, the selected category was deleted

Thanks in advance

BlockListAdmin

function BlockListAdmin() {
    const category = useSelector(state => state.newcat.category); // * Take category from redux store
    console.log(category)
    const dispatch = useDispatch()


    const DelCategoryC = (id) => {
        dispatch(delCat(id))
    }


    const [del, setDel] = useState(false);
    const delCatT = () => {
        setDel(!del)
    }

    return (
        <>
            
                {category.map((objectCategory) => {
                    return (
                        
                            
                                
                                    {objectCategory.name}
                                
                                
                                
                                {/* тут было */}
                                
                            
                            {/* {
                               objectCategory.list.lenght ? 
                                {objectCategory.list.map((item) => {
                                    return ;//? replace key;
                                })}
                            
 : 
                           }  */}
                            
                                {objectCategory.list.map((item) => {
                                    return ;//? replace key;
                                })}
                            
                            {del ?
                                 : null}
                        
                    )
                })}
            
        
    )
}
export default BlockListAdmin;

DelCategory

function DelCategory({id, setActiveWindow}) {


    const dispatch = useDispatch()

    const delCatC = (e) => {
        e.preventDefault()
       setActiveWindow(false)
        dispatch(delCat(id))
    }

    return (
        
            
                
                    Удаление категории
                
                Вы уверенны, что хотите удалить эту категорию?
                    Все закладки из этой категории также будут удалены

                
                    
                    
                
                
            

        
    )
}

export default DelCategory;

action

export const delCat = (id) => ({
  type: 'DEL_CATEGORY',
  payload: { id },
})

reducer

const initialState = {
    category: [
        {
            id: 1,
            name: "Изброное",
            color: "#5236C1",
            list: [
                {
                    title: "Яндекс.Почта",
                    about: "Сервис с бесплатными иконками на любой вкус и цвет и есть немного платных. Но норм.",
                    imgLink: 'https://www.google.com/s2/favicons?domain=https://mail.yandex.ru/',
                    url: 'https://www.yandex.ru'
                },
            ]
        },
    ]
};
const delCat = (state, payload) => {
    const { id } = payload
    const idx = state.category.findIndex((el) => el.id === id)
    let pastState = state.category.slice(0, idx)
    let futureState = state.category.slice(idx + 1)
    let newState = [...pastState, ...futureState]
    return {
        ...state,
        category: newState,
    }
}
const newcat = (state = initialState, action) => {
    switch (action.type) {
        case 'DEL_CATEGORY':
            return delCat(state, action.payload)
        default:
            return state;
    }
};
export default newcat;

My friends, fewer bugs for you

user_15327638 · Answer

The problem was that when rendering, the id was overwritten with the id of the last element. Thus, id was assigned the number of the last element. To avoid this, as an option, you should create a useState and put the id of a specific element in it.

Update

BlockListAdmin

//create state
    const [id, setId] = useState(null);
//create func
     const takeId = (id) => {
        setId(id)
        setDel(!del)
    }

DelCategory

 const delCatC = (e) => {
        e.preventDefault()
        setActiveWindow(false)
        dispatch(delCat(elDelId))
    }

Bug delete el on array

1 Answers