How to delete object in array?

Question

I used componentDidUpdate and in it I put a shift method, which is used to delete an object from a JSON array and thereby re-render the displayed posts, but the shift method deletes the first object from the array independently in which the delete button on the post will I press? Is there any possibility, then, to bypass the deletion of the first element in favor of the one that is designated to be deleted?

componentDidUpdate(prevProps, prevState) {
        const {posts} = this.props;
        const indexPosts = posts.findIndex((post) => post.id === this.state.postId);

        if(prevProps.posts !== posts){
            this.handleData();
        } else if (indexPosts !== -1)
        {
            this.informationAlert();
            const log = posts.splice(indexPosts, 1);
            console.log(log);
        }   
    }

EDIT: Actions

export const deletedPost = (id) => (dispatch) => {
    axios
        .delete(`https://jsonplaceholder.typicode.com/posts/${id}`, id, {
            headers: {
                'Content-type': 'application/json'
            }
        })
        .then((post) =>
            dispatch({
                type: DELETED_POST,
                payload: post.data
            })
        )
        .catch((err) => console.log(err));
};

import { FETCH_POSTS, NEW_POST, DELETED_POST, FETCH_COMMENTS, NEW_COMMENT } from '../actions/types';

const initialState = {
    items: [],
    item: {},
    itemComent: [],
    itemNewComment: {},
    deletedPost: []
};

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_POSTS:
            return {
                ...state,
                items: action.payload
            };
        case NEW_POST:
            return {
                ...state,
                item: action.payload
            };
        case DELETED_POST:
            return {
                ...state,
                deletedPost: action.payload
            };
        case FETCH_COMMENTS:
            return {
                ...state,
                itemComent: action.payload
            }
        case NEW_COMMENT:
            return {
                ...state,
                itemNewComment: action.payload
            }
        default:
            return state;
    }
}

EDIT 2:

const mapStateToProps = (state) => ({
    posts: state.posts.items,
    newPost: state.posts.item,
    deletedPost2: state.posts.deletedPost
});

EDIT 3:

handleDeletedPost = (id) => {
        this.setState({
            postId: id
        })
    }

Edit 4:

//I added in constructor 
this.state: dataPost: '',

//next I create function to load data and send to state dataPost
handleData = (e) => {
        const {posts} = this.props;
        const {dataPost} = this.state;
        const letang = posts;
        const postsData = dataPost;

        if (postsData.length <= 0) {            
            this.setState({
                dataPost: letang
            })
        } else {
            console.log('stop')
        }       
    }
// next i create in componentDidUpdate this code
componentDidUpdate(prevProps, prevState) {
        const {posts} = this.props;
        const indexPosts = posts.findIndex((post) => post.id === this.state.postId);

        if(prevProps.posts !== posts){
            this.handleData();
        } else if (indexPosts !== -1)
        {
            this.informationAlert();
            const log = posts.splice(indexPosts, 1);
            console.log(log);
        }   
    }

** When I added loop if (indexPosts !== -1) then my array is cut only one object :-) API Posts: https://jsonplaceholder.typicode.com/posts/

The results are visible at this link when you press details and then the delete icon: https://scherlock90.github.io/api-post-task/

you should also not be mutating props like that. Create a piece of state that holds your mutated array. — Chase
– Chase, Commented Jun 5, 2019 at 15:58
I added the first post probably the information you asked for. @kiranvj — SeN
– SeN, Commented Jun 5, 2019 at 16:24

kiranvj · Accepted Answer · 2019-06-05 16:38:21Z

2

You need to use splice to delete an element from array. In splice you need to provide startIndex and number of elements to remove in second argument. In below code find index using `findIndex method, second argument is 1 as we need to remove only 1 element.

Try this

componentDidUpdate (prevProps, prevState) {
        if (prevProps.deletedPost) {
            const { posts } = this.props
            const letang = posts.splice(posts.findIndex( (post)=> post.id === prevProps.deletedPost.id), 1);

           console.log(posts); // this should have array without deletedPost
        }
    }

edited Jun 5, 2019 at 16:38

answered Jun 5, 2019 at 16:27

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Heretic Monkey Over a year ago

Answers which explain the code they introduce are more useful than those which do not...

SeN Over a year ago

@kiranvj Your proposal results in an empty table, but no post is removed

kiranvj Over a year ago

@Sen console.log(posts); // this should have array without deletedPost

SeN Over a year ago

Yes I have, and there is empty array

SeN Over a year ago

But i change to const letang = this.props.posts.slice(this.props.posts.findIndex( (post)=> post.id === this.state.postId), 1); then i see first posts in console log

|

Claeusdev · Accepted Answer · 2019-06-05 15:59:58Z

1

This might help:

componentDidUpdate (prevProps, prevState) {
    if (prevProps.deletedPost) {
        const letang = this.props.posts;
        letang.splice(deletedPost, 1);
    }
}

the slice() takes the index of the object and an optional number of items to delete. since you just want to delete a single object you pass 1.

answered Jun 5, 2019 at 15:59

Claeusdev

5033 silver badges12 bronze badges

2 Comments

SeN Over a year ago

I tried a methody splice, but it still erases the first element from the array and not the selected one

Claeusdev Over a year ago

is the deletePost an object or an id?

Chukwuemeka Ihedoro · Accepted Answer · 2019-06-05 17:22:53Z

1

This might help, try filtering out the object you dont want in the array.

componentDidUpdate (prevProps, prevState) {
    if (prevProps.deletedPost) {
        const letang = this.props.items.filter(p => p.id !== prevProps.deletedPost.id);
    }
}

UPDATED I think you should be deleting the items in your redux store rather than trying to delete the posts from your api since the api might rather be generating the same data randomly. Change your actionCreator to

export const deletedPost = (id) => {
   dispatch({
       type: DELETED_POST, 
       payload: id 
   });
};

Then use this in your reducer so you can focus on items array coming from your reducer store. Then remove deletedPost: [] from your reducer.

...
    case DELETED_POST:
        const newItems = state.items.filter(p => p.id !== action.payload);
        return {
            ...state,
            items: [ ...newItems ],
        };
...

edited Jun 5, 2019 at 17:22

answered Jun 5, 2019 at 16:01

Chukwuemeka Ihedoro

6051 gold badge6 silver badges17 bronze badges

6 Comments

Chukwuemeka Ihedoro Over a year ago

@SeN from your reducer, you are using items instead of posts, try replacing this.props.posts.filter with this.props.items.filter

SeN Over a year ago

but if you see EDIT 2 then you see why is posts

Chukwuemeka Ihedoro Over a year ago

@SeN okay. now i see you are using deletedPost2 in your mapStateToProps. change the prevProps.deletedPost.id to prevProps.deletedPost2.id

SeN Over a year ago

then i see error : "Uncaught TypeError: Cannot read property 'filter' of undefined at Posts.componentDidUpdate "

SeN Over a year ago

in console log I see a change in the sense of one post less always selected, but unfortunately it does not render the state in the displayed objects in the app. And it is always one element that disappears, not that the selected posts are subtracted one by one

|

Ernesto · Accepted Answer · 2019-06-05 15:58:33Z

0

use splice() to delete :), you can find the index of post which should be deleted and then delete it by using this method.

answered Jun 5, 2019 at 15:58

Ernesto

9542 gold badges17 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to delete object in array?

4 Answers 4

6 Comments

2 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related