Edit recipe on Recipe box project

Edit recipe on Recipe box project
0.0 0


Hi, I have a recipe state in the main App component as an array of recipe objects

this.state = {
      recipe: [{
        name: 'egg',
        ingredients: 'egg'
        name: 'pizza',
        ingredients: 'flour,yeast,water,salt'

. I created a new component “EditRecipe” and pass the function “editRecipe(recipe)” as a prop to that component.

<EditRecipe edit={this.editRecipe} />

Inside the EditRecipe component, I use this

editRecipes = () => {
		const recipe = {
			name: this.state.recipeName,
			ingredients: this.state.recipeIngredients

Which pass back the recipe object to the main App component. How would I modify the existing recipe object in the array of recipe objects?

Thank you.


If i’m not wrong you did not posted the function editRecipe (included in your main component, accepting one parameter), which should contain the setState method to modify your state. Am i missing something?


I have not passed anything to that function, I have not figured out the way


Here you’re passing the argument:


Supposing that you have something like

editRecipe = (recipeChanged) => {

It should work. Am I correct?


Yes, that’s what it is supposed to look like, but I don’t know how to modify that particular recipe object


I just re-read the first post: you have two component, one child of another, both stateful? Can you post the state of both then? Better would be to have both whole components :smile:


Yes. In the EditRecipe component I have two states of name and ingredients, and pass the string values on change to the prop.