CODEWITHSUNDEEP
jsonreactjsredux
SeN
SeN

Reputation: 161

How to delete object in array?

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/

Upvotes: 1

Views: 242

Answers (4)

Chukwuemeka Ihedoro
Chukwuemeka Ihedoro

Reputation: 605

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 ],
        };
...

Upvotes: 1

kiranvj
kiranvj

Reputation: 34117

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

Upvotes: 2

Claeusdev
Claeusdev

Reputation: 503

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.

Upvotes: 1

Ernesto
Ernesto

Reputation: 944

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

Upvotes: 0

Related Questions