Remove item from object of arrays

Question

I have a react application that uses Redux. Right now I have a list of books being shown with redux and would like to implement CRUD to it. The code to list the books is:

listBooks(){
        return this.props.books.map((books) => {
            return(
                <tbody key={books.title}>
                    <tr className="tr-book">
                        <td>{books.series}</td>
                        <td>{books.title}</td>
                        <td>Vol. {books.volume}</td>
                        <td>
                            <button onClick={() => deleteBook(this.props.books, books.id)}className="btn-action">Delete</button>
                            <button onClick={() => editBook(this.props.books)}className="btn-action">Update</button>
                        </td>
                    </tr>
                </tbody>
            );
        })
    }

And it lists fine. The deleteBook action has this action:

export function deleteBook (book, id) {
    book = book.filter(function(book){
        return book.id !== id 
    });
    console.log(book.id);
    return {
        type: "BOOK_DELETED",
        payload: book
    }
}

And it doesn't work. I've tried some approaches, but most of them didn't work because book isn't a array, but rather a Object of Arrays. In this case, how can I tell the function deleteBook to filter these books and return only the ones which book.id !== id ?

UPDATE: Here's where the books are set:

export default function listBooks() {
    return[
        {
            id: 1,
            volume: 1,
            series: 'A Song of Ice and Fire',
            title: 'Game of Thrones',
            rank: 0
        },
        {
            id: 2,
            volume: 2,
            series: 'A Song of Ice and Fire',
            title: 'Clash of Kings',
            rank: 0
        },
        {
            id: 3,
            volume: 3,
            series: 'A Song of Ice and Fire',
            title: 'Storm of Swords',
            rank: 0
        },
        {
            id: 4,
            volume: 4,
            series: 'A Song of Ice and Fire',
            title: 'A Feast of Crows',
            rank: 0
        }, {
            id: 5,
            volume: 5,
            series: 'A Song of Ice and Fire',
            title: 'A Dance With Dragons',
            rank: 0
        }, {
            id: 6,
            volume: 1,
            series: 'The Lord of the Rings',
            title: 'The Fellowship of the Ring',
            rank: 0
        }, {
            id: 7,
            volume: 2,
            series: 'The Lord of the Rings',
            title: 'The Two Towers',
            rank: 0
        }, {
            id: 8,
            volume: 3,
            series: 'The Lord of the Rings',
            title: 'The Return of the King',
            rank: 0
        }
    ]    
}

Answer 1

Your books is an array of object for one and not an object of arrays

Second, you must filter the book to be removed in reducer and not action and hence your reducer will look like

export function booksReducer (state = initialState, action) {

    switch(action.type) {
       ...
       case 'DELETE_BOOK': return state.filter(function(book){
          return book.id !== action.id 
       });
       ...
    }
}

and your action will be

export function deleteBook (id) {

    return {
        type: "DELETE_BOOK",
        payload: id
    }
}

and call the action like

listBooks(){
    return this.props.books.map((books) => {
        return(
            <tbody key={books.title}>
                <tr className="tr-book">
                    <td>{books.series}</td>
                    <td>{books.title}</td>
                    <td>Vol. {books.volume}</td>
                    <td>
                        <button onClick={() => deleteBook(books.id)}className="btn-action">Delete</button>
                        <button onClick={() => editBook(this.props.books)}className="btn-action">Update</button>
                    </td>
                </tr>
            </tbody>
        );
    })
}