How to pass a delete function as props in ReactJS

Question

I am building a recipe app and am having trouble with a delete function.

How it works is you click an "Add Recipe" button and a modal pops up that lets you fill in some input fields for a new recipe. Within that form is an ingredient field and an "Add Ingredient" button. You click "Add" and the ingredient is added to a list of ingredients. It behaves exactly like a todo list, but it is inside of a form component. I also want to be able to remove an ingredient.

My app components are structured like this:

• RecipeBook.js (parent)
• RecipeCardForm.js (child)

This is the form component located in the parent component:

<RecipeCardForm
handleRemoveIngredients={this.handleRemoveIngredients}
/>

Also in the parent component is the removeIngredient function:

handleRemoveIngredient = id => {
  const filteredIngredientList =  this.state.ingredientList.filter(ingredient => id !== ingredient.id);
  this.setState({ingredientList: filteredIngredientList})
  }

In the child component, this is returned inside a <ul> which displays the ingredientsList:

{this.props.ingredientList.map(ingredient => {

              return (
                <li key={ingredient.id}>
                    <span>{ingredient.amount}</span>
                    <span>{ingredient.ingredient}</span>
                    <span ><button type='button' className='btn btn-danger' 
                    onClick={ this.props.removeIngredient }>X</button></span>
                </li>
              )
            })}

Because of how it's structured, I cannot figure out how to pass the id along which would normally go in the delete function of the delete prop in the parent component.

Normally, I would do something like this:

this.state.items.map(item => {
<List
handleRemoveItem={() => this.handleRemoveItem(item.id)} />

But since nothing is being mapped in the parent component, I have no way to pass the id along.

Because of this, when I log the id in the removeIngredient function, it comes up as undefined. I know its there though. When i log it in the add function, there is an id, and when I log it as I am mapping each ingredient in the child component, it is also there. I can even access it in the onClick of the delete ingredient button:

<button 
 type='button' 
 className='btn btn-danger' 
 onClick={ () => console.log(ingredient.id)}>Delete</button>

That gives me the id too.

I just cannot wrap my mind around how to pass it without mapping in the parent component but there is literally nothing to map in the parent component. And of course passing "this.state.id" just gives me the initial state which is an empty string.

Any help would be much appreciated to help me understand how to do this. Thanks in advance!

Answer 1

I think the solution to your problem would be to pass the ID to the this.props.handleRemoveIngredient function like this:

onClick={this.props.handleRemoveIngredient(ingredient.id)}

In your example you did not hand the function the ingredient id and did call the this.props.removeIngredient function which is not the correct name of the prop / function.

Answer 2

Nevermind, just figured it out.

The solution was indeed onClick={ () => this.props.removeIngredient(ingredient.id) }

My issue was when I was passing the props to the child component handleRemoveIngredient={this.handleRemoveIngredient} I was passing it as a function with no arguments handleRemoveIngredient={() => this.handleRemoveIngredient()} and for some reason that was making the id come back undefined.

Thanks for the help!!

Answer 3

{this.props.ingredientList.map(ingredient => {

          return (
            <li key={ingredient.id}>
                <span>{ingredient.amount}</span>
                <span>{ingredient.ingredient}</span>
                <span ><button type='button' className='btn btn-danger' 
                onClick={ () => this.props.removeIngredient(ingredient.id) }>X</button></span>
            </li>
          )
        })}