Edit button Recipe Box

JavaScript
1

I am working on the edit button, and I think I am headed in the right direction…hopefully. So I get the recipe with the index when I click on the recipe name in the list. So im thinking just assigning the user input values to the selected recipes name, directions, and ingredients. which replaces all 3 of those filed with the user input, but does not change the name in the list. Which im guessing is because the recipes is never updated, so I guess I am going the wrong way. any help with that would be appreciated.

Second I have two modals in the code. One for adding a recipe, and one for editing the recipe. Both buttons are calling the handleshow method which may be the problem? So if either button is pressed only the edit modal comes up

2

So where are you passing the recipe to the modal?

Also, add recipe does not work.

3

The add does work, just not since I added the second modal in edit. Both of the add and edit buttons seemed to be linked to the edit modal only.

My thought was since selectedRecipe already holds the particular recipe that I want to edit on the click. And then set the input to the selectedRecipes name,instructions, and directions. That changes it, but since recipes is not being set it doesn’t really change the actual recipe

4

When you add there is no submit button, only edit, and that doesn’t do anything.
My recipe app kept add and edit forms separate.
How do you handle the difference?
Your code is hard to follow.

5

It works now. I had to add two new functions…I didnt think calling the same show would really matter, but I guess it did.

For my edit im still kind of lost. I get the recipe from selectedRecipe from the on click in the li list. Obviously the editRecipe is not doing what I want. I thought it would edit that recipe, but its only changing whats being printed underneath my current recipe not the recipe itself

editRecipe(){
     this.state.selectedRecipe.name = this.state.editName
     this.state.selectedRecipe.directions = this.state.editDirections
      this.state.selectedRecipe.ingredients = this.state.editIngredients
    this.setState({selectedRecipe, showModal: false})
  }
6

For editing you should pass the values down to the modal as props.
I would do it that way.

7

I believe to alter state you must use setState()

8

SelectedRecipe holds a name, directions, and an ingredient. I set the selectedRecipe underneath in the set state. Which sets that to the selectedRecipe. This however doesn’t save that selectedRecipe I edited, it just changes the values that get displayed in my current recipe. Not that actual recipe

9

Which my guess is I need to somehow set both selectedRecipe and the recipe list

10

This is as far as I have got passing the editable record to the modal:

You were mixing some of your object naming (directions / instructions).

The key change is lines 144-149 where I set the state to the selected recipe to pass down to the modal.

11

So I have the selectedRecipe when I click on a name from the list. When edit is press exit brings up a modal that allows the user to edit that specific recipe. However the code I have now sets the input to the selected recipe, but doesn’t save it. Meaning I can click on pizza again, and the original recipe is there not the edited recipe. So I was discussing this with another user, and he suggested to edit the recipe, and use map to replace the original recipe with the edited one. Not sure how I can do that

Here is my updated pen

12

This was my attempt
“1. edit the selected recipe
2. find the selected recipe in the list and replace it with the selected recipe which you have edited. hint you map
In the map you will only change the one with the same name as the selected one.”

  Replace(){
    const recipes = [...this.state.recipes]
    if(recipes.name === this.state.selectedRecipe.name){
      recipes.splice(this.state.recipe, 1, this.state.selectedRecipe)
    }
  }
  //Function for editing the recipe
  editRecipe() {
   const recipes = [...this.state.recipes]
  this.state.selectedRecipe.name = this.state.editName;
   this.state.selectedRecipe.ingredients = this.state.editIngredients;
   this.state.selectedRecipe.directions = this.state.editDirections;
    recipes.map(this.replace)
   this.setState({recipes})
  }
13

Anyone? Right direction, wrong direction?

14

How many times can I bump before I get in trouble?

16

Appreciate it. Not going to lie though…I read that first part and thought “oh crap” . Take your time. Everyone needs some time to themselves.

Map is probably far off

17

I looked at your code briefly. I think maybe you should set a const within your editRecipe function that edits the recipe and sets it equal to the index of that particular item i.e.:

item[indexOfItem] = whateverUserInputted;

Then set the state equal to item within editRecipe.

I just finished the Recipe Box project a few days ago and I was also stuck on this editing a recipe issue. Here’s the solution I ended up going with:

onEditSubmit = (event) => {
    event.preventDefault();
    const {items, ingredients, inputValEdit, ingredientValEdit, editingIndex} = this.state;

    // Selects proper recipe item to edit
    items[editingIndex] = inputValEdit;
    ingredients[editingIndex] = ingredientValEdit;

    this.setState({
      items: items,
      ingredients: ingredients,
      inputVal: '',
      ingredientVal: ''
    });
  }

And for reference here is what my component’s state looks like:

 this.state = {
      items: ["Pumpkin Pie", "Spaghetti", "Onion Pie"],
      ingredients:[
        ["Pumpkin Puree ", "Sweetened Condensed Milk ", "Eggs ", "Pumpkin Pie Spice ", "Pie Crust "],
        ["Noodles ", "Tomato Sauce ", "(Optional) Meatballs "],
        ["Onion ", "Pie Crust "]
      ],

      // Recipe name and ingredients
      inputVal: '',
      ingredientVal: '',
      // Recipe name and ingredients when user is editing existing recipe
      inputValEdit: '',
      ingredientValEdit: '',
      // Controls whether forms are displayed or hidden
      showRecipeForm: false,
      showRecipeEditForm: false,
      // Index to select which recipe item is being edited
      editingIndex: ''
    };

Full code is here

18

I’d also get rid of the whole Replace function and the splicing and whatnot and just use an index variable to select the recipe the user is editing and just update it via setState. I don’t think you need to splice or map.

19

I tried something like this

editRecipe() {
   const recipes = [...this.state.recipes]
  this.state.recipes.name[this.state.editIndex] = this.state.editName;
   this.state.recipes.ingredients[this.state.editIndex] = this.state.editIngredients;
   this.state.recipes.directions[this.state.editIndex] = this.state.editDirections;
  
    this.setState({recipes})
  }

  handleRecipeClick(index) {
    this.setState({
      selectedRecipe: { ...this.state.recipes[index] }, // here you set a copy of the recipe as the selected recipe
      editMode: true,
      editIndex: index
    });
  }

My thoughts were that when the recipe name got clicked on it was set the index of the recipe to the edit index. I then could use that index to select the name, ingredients, and directions. however there was no luck

20

My latest attempt :sweat_smile: still not getting it…shouldnt be this hard. I guess thats why programming is a life time life style. So I was told not to go the index route like above, or that it wasnt the best, so back to the original tip

“edit the selected recipe
find the selected recipe in the list and replace it with the selected recipe which you have edited. hint you map”

has to be in the right direction?

 editRecipe() {
   const recipes = [...this.state.recipes]
   const newSelectedRecipe = {...this.state.selectedRecipe}
    newSelectedRecipe.name = this.state.editName;
    newSelectedRecipe.ingredients = this.state.editIngredients;
    newSelectedRecipe.directions = this.state.editDirections;
    recipes.map(recipe => recipe.name === this.state.selectedRecipe.name).splice(this.state.selectedRecipe, 1, newSelectedRecipe)
    this.setState({recipes})
  }
22

Basically in my mind (I may need some practice with maps like reduce) this is suppose to go through the recipes array, and find the name equal to the name of the selectedRecipe. Once I find that recipe I remove it, and put the edited recipe in its place.

This is my interpretation of the hint I received, unfortunately the user who gave me this hint has not been on the last week.