Making sure the right object is selected

JavaScript
1

I was hoping to get more done today, but the joy of having UC is that I am feeling like pure crap (pun intended). Anyway I have been thinking about this today, but again being sick with a flare up…there really is no getting anything done…

Let me start off by saying I am not looking for a full solution! I have not really had much experience with arrays, and objects when I took classes in college. So if I just keep getting code then I wont really learn for myself. Anyway I have it so the recipe shows when you click on it, and a modal comes up for the recipe to be edited (I havent finished the inside of the modal). So I want to make sure that I am editing the right recipe.

train of thought: my thought right now is maybe it looks something like my handleRecipe method? Where I have a map or loop that goes through the array, and looks for that recipe that was selected?

Which brings me to my second question. in the modal I want the selected recipes info to show up in the input that way if they are editing they do not have to re type everything. I assume that I set that recipes ingredients, directions, and name as the values of the input, and handlechange will allow for editing. Which would be the same thing I have to find that recipe that was selected

here is the pen I am working with

2

So I have been thinking how to approach the add, edit, and delete buttons. Theres something that I do not understand

Here is what I came up with for add in another pen

 handleAddSubmit(){
    const obj = {'name' : this.state.addRecipe};
    const recipes = [...this.state.recipes, obj]
    this.setState({
      recipes,
      addRecipe: ""
    })
    console.log(recipes);
  }

Which adds then name just fine, but looking at other code like:

 addRecipe(recipe) {
    let updatedRecipes = this.state.recipes.slice();
    updatedRecipes.push(recipe);
    this.setState({recipes: updatedRecipes});
  }


 handleSubmit(e) {
    e.preventDefault();
    var newName = this.recipeName.value;
    var newIngredients = this.recipeIngredients.value.split(regExp);
    var newRecipe = {name: newName, ingredients: newIngredients};
    this.props.onAdd(newRecipe);
  }

Correct me if im wrong, but everything could of been done in the add recipe method right?
Difference is I only added the name to see if it works