React Recipe Box help

React Recipe Box help
0

#1

Can anyone help me out with the debugging errors or advice on refactoring it? So far I’ve been successful in converting old ES5 syntax to ES6 from code I’ve together from examples. Edit and delete recipe are broken though…


#2

The code is a bit messy so it’s hard to pin point the exact bug location, however the console is complaining that
cannot read property recipes of undefined at Modal.ClickHandler.
But I fear is the re-binding of clickHandler() that is causing you trouble.

By a look on how you have set things up you have:

1 - the component RecipeBox who holds the state
2 - the modal, with a method on click that should change some values on its parent (recipe)

In general what you want to do is to keep all the method in the parent, and just pass the method as prop to its child, and on click it will simply call the parent one:

// parent
editRecipe(arg) {
 // edit my recipe here
}

<Modal
    onEdit={this.editRecipe}
/>


// then in the child
function Modal(props) {
  return (
    <button
       onClick={() => props.onEdit( // any arg you want to pass )}
    >
 )
}

Hope it helps :+1:


#3

Yes it seem that the example ES5 code I based it on was able to pass props from the modal text boxes without the parent child hierarchy defined because the clickHandlers job was to pass the state directly to the modal.