Alejandro Alejandro - 1 year ago 152
Javascript Question

React-Redux- Delete an item from list

Currently I am working on this FCC project:

As of now, I was able to implement on adding new recipes to the list.

However, I am having hard to implement on how to edit/delete per each recipe item list. For now, I just want to focus on how to DELETE per item.

The way I am displaying the recipe list is in the RecipeBox Container, where I am using map function to iteratively rendering each of them from the app's state, as well as rendering the buttons EDIT and DELETE.

But I cant seem to attach an action to it.
I get the following error:

Uncaught TypeError: Cannot read property 'props' of undefined

RecipeBox Container:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ListGroup, ListGroupItem, Panel, Button, Modals } from 'react-bootstrap'
import { bindActionCreators } from 'redux';
import { deleteRecipe } from '../actions/index';

class RecipeBox extends Component {
this.state = {
open: false

const recipe = recipeItem.recipe;
const ingredients = recipeItem.ingredients;
<div key={index}>
<Panel bsStyle="primary" collapsible header={<h3>{recipe}</h3>}>
<ListGroup >
<ListGroupItem header="Ingredients"></ListGroupItem>
return <ListGroupItem key={index}>{ingredient}</ListGroupItem>;
onClick={() => console.log('EDIT!')}
<div className="container">
<div className='panel-group'>

function mapStateToProps(state) {
return {
addRecipe : state.addRecipe

function mapDispatchToProps(dispatch){
return bindActionCreators({deleteRecipe}, dispatch)

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

This seems very trivial, but I keep hitting a roadblock..

Answer Source

Add this.renderRecipeList = this.renderRecipeList.bind(this) in the constructor.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download