mapping a dispatch to props when using class

Question

I am trying to dispatch a redux action when an element is clicked. Here is how I currently have things set up

the action

export function removeItem(idx) {
  // remove the item at idx

  return {
    type: "DESTROY_ITEM",
    payload: {idx: idx}
  }
}

container component

import ItemUi from '../ui/Item';
import { connect } from 'react-redux'
import { removeItem } from '../../actions'

const mapDispatchToProps = dispatch => {
  return({
    destroyItem: (index) => {
      dispatch(
        removeItem(index)
      )
    }
  })
}


export default connect(null, mapDispatchToProps)(ItemUi)

ui component

import React, { Component, PropTypes } from 'react';

class Item extends Component {

  // ... methods removed for length

  render() {

    return (
      <div>
        <span 
          className="btn btn-primary btn-xs glyphicon glyphicon-trash"
          onClick={() => {this.props.destroyItem(this.props.index)}}></span>
      </div>
    )
  }
}

DestroyItem.propTypes = {
    onRemoveItem: PropTypes.func
}

export default Item

the top level component

import React, { Component } from 'react';
import Item from './Item'

class App extends Component {
    render() {
        return(
            <div className="container">
              <NewItem/>
              <ClearAll/>
              <div className="panel-group" id="accordion">
                {this.props.item.map(this.eachItem)} // <-- renders each item
              </div>
            </div>
        )
    }
}

export default App;

When the user clicks the span element shown in the Item ui component I want to fire the destroyItem action passing in the component's index prop. Instead I get the error

TypeError: _this2.props.destroyItem is not a function

Can you please provide some guidance on how I should do this? Let me know if there is any other useful context I can provide.

Answer 1

Try:

const mapDispatchToProps = {
    destroyItem: removeItem
}