So I have been attempting to work with react, and right now im just trying to get the skeleton or idea done of how I want to make an app. Right now I have recipes, a add, and edit recipe button. My recipe button works, and im trying to get my save to work. My problem right now is I have two inputs that seem to be linked together since they are using the same handle change. Not sure how to deal with that, but when I get rid of one of the inputs my new recipe obj is added to the array but the name property is always an empty string no matter what i enter in the input. Theres no styling in this. again I just want to get it working before i add anything
I haven't had a chance to go through your code thoroughly (it's Saturday morning), but here's an example of how I handle input changes in state:
Note how both the name of the state property and the value are extracted from the event ¹.
¹ There's actually a notation that would allow this to be expressed in a single statement, but I didn't want to throw a new ES6+ concept into the mix at this point.
Also note that I used an arrow function. By using arrow functions for handlers, the function context (this) is automatically bound correctly and you can get rid of the binding statements in the constructor (lines 20 through 22).
I highly recommend this approach. It's not only cleaner, it's much less error prone by not having to remember to add a binder in the constructer every time you declare a new handler.
Well, I tried that but I only have 2 things of state, and from the articles I looked at the names of the inputs have to match that of state. So that did not work out..I cant set them both to input, and would it reammy make sense to create new state just for this?
So, one name would be “input” which would go with my input state. There would be no other name for my other input. For creating new input I meant like creating another input in state for the input that does not have state to go with it
So I got it working (kinda) the inputs look like they are no longer linked, but when I try to add a new obj to the array nothing happens. If i console.log though it shows the name: has been added, but still as a empty string and not the value entered in the textbox. I have my map mapping out names: already so my though was once the button is clicked it gets added to the array, and should show up with tacos, and pizza that are already rendered in a list
posted 1 year ago
fixed it. Did not have .bind on my handleAddSubmit in the constructor...which could have been avoided if I used the arrow functions like you suggested bear. I will change those, only been working with react seriously now for a few weeks. Hopefully this will click pretty soon