Problems deleting items from Redux store using onClick event

Question

I want to be able to delete an specific object from an array in my store. I made a delete item function that works and deletes the objects, however I haven't been able to figure out how to make this function work when I use a button that is rendered with each object with map. This is my component:

import React, { Component } from 'react';
import {addCart} from './Shop';
import { removeCart } from '../../actions'; 
import { connect } from 'react-redux';

export class Cart extends Component {
    constructor(props) {
        super(props);
        this.state = {items: this.props.cart,cart: [],total: 0};
    }

    handleClick(item) {
        this.props.onCartRemove(item);
    } 

    ...


    render() {
        return(
            <div className= "Webcart" id="Webcart">
                <div>
                    {this.state.items.map((item, index) => {
                        return <li className='cartItems' key={'cartItems_'+index}>
                            <h4>{item.item}</h4>
                            <p>Size: {item.size}</p>
                            <p>Price: {item.price}</p>
                            <button onClick={this.handleClick}>Remove</button>
                        </li>
})}
                </div>
                <div>Total: ${this.countTotal()}</div>
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onCartAdd: (cart) => {
            dispatch(addCart(cart));
        },
        onCartRemove: (item) => {
            dispatch(removeCart(item));
        },
    }
}

function mapStateToProps(state) {
  return { cart: state.cart };
}

export default connect(mapStateToProps, mapDispatchToProps)(Cart);

With the function handleClick I get Uncaught TypeError: Cannot read property 'props' of null. If I try something like

deleteItem() {
        return this.state.items.reduce((acc, item) => {
            return this.props.onCartRemove(item);
        })
    }

... the code deletes all items in the loop without any errors. How can I can use the button to remove that particular item?

larv · Accepted Answer · 2017-08-06 23:36:10Z

1

Are you really getting the item for it to be removed?

try this on your button inside your map:

<button onClick={() => this.handleClick(item)}>Remove</button>

answered Aug 6, 2017 at 23:36

larv

9386 silver badges19 bronze badges

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

1 Comment

larv Over a year ago

did this solve the question? if so, please consider an upvote for others to see the best and the accepted answers, don't be shy to upvote others even if it isnt the correct answer but if they are providing helpful insights that made you move closer to your goal.

Christian Hain · Accepted Answer · 2017-08-06 23:35:45Z

1

You need to bind your handler.

constructor(props) {
    super(props);
    this.state = {items: this.props.cart,cart: [],total: 0};
    this.handleClick = this.handleClick.bind(this);
}

https://facebook.github.io/react/docs/handling-events.html

answered Aug 6, 2017 at 23:35

Christian Hain

6394 silver badges11 bronze badges

Collectives™ on Stack Overflow

Problems deleting items from Redux store using onClick event

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related