Recipe App with React, passing form data up

Recipe App with React, passing form data up
0

#1

So i’m pulling my hair out with React Recipe App. i thought it was going along great, then I tried to implement the editing part. I can get an edit and/or a save button and pass down editing state and click handlers and stuff like that.

But the damn FORM data for editing a recipe…I cannot get it’s state to update either in the same component, nor by trying to pass it up the tree.

Gah! Anyone else done the recipe app yet?


#2

I’m also stuck with editing a recipe. I thought of using the same form I used for adding recipes, but then it doesn’t seem right (like the form is doing two things).

Or maybe I’m just overthinking it.


#3

Got a codepen to look at?
Without seeing code… console.log everything… check that when you enter something in the input field, your handler is firing as expected and you are getting the input field value correctly. It kinda sounds like your setState doesn’t have what it needs. Either that, or once the state is changed, the component isn’t displaying it in its field… maybe because it’s displaying a value from this.props rather than this.state or vice versa (this happened to me a lot when refactoring from one component into many and passing things up and down). Good luck…

When I got/get truly stuck with react (I had to start the recipe box over from scratch) I get away from the project, and open a new pen that is the simplest possible representation of the troublesome thing, in your case getting an input field to save a value. Then expand it back out to what your project needs… incremental progress towards your goal. Fork early and often, and seriously… console.log everything. :slight_smile:


#4

That’s great advice. I’m developing locally so no pen but can post github repo, although that’s more work for people who want to help.

It is console logging updates when the handler is in the component, but the save button won’t update the state. I’m using it to both change editing to false as well as to try and update “instructions” which was set in constructor props.

I’ll post simple version in own later today