Edit recipe on Recipe box project

1

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
		}
		this.props.edit(recipe);
	}

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.

2

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?

3

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

4

Here you’re passing the argument:

this.props.edit(recipe);

Supposing that you have something like

editRecipe = (recipeChanged) => {
this.setState({
modifyYourRecipe
});
}

It should work. Am I correct?

5

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

6

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:

7

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