• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Bear Bibeault
  • Junilu Lacar
  • Martin Vashko
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Knute Snortum
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Scott Selikoff
  • salvin francis
  • Piet Souris

Object being added as a empty string

 
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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

 
Marshal
Posts: 67313
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Bear Bibeault
Marshal
Posts: 67313
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Cody Biggs wrote:Well, I tried that but I only have 2 things of state


So? What's the problem?

and from the articles I looked at the names of the inputs have to match that of state


My code assumes so, yes. And what's the problem with that? It's actually a very common convention.

But even so, it doesn't have to be so. What's an easy way to translate one name to another? Or tell the hander what name to use?

So that did not work out.


You're not trying very hard.

I cant set them both to input


Of course not. I've already shown you that that's not necessary.

and would it reammy make sense to create new state just for this?


What do you mean by "create new state". A component only has one state.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bear Bibeault
Marshal
Posts: 67313
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Why would you call any property in the state "input"? It's too generic and a poor name. What do the inputs represent? Use better names, and a different one for each value.
 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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

 
Cody Biggs
Ranch Hand
Posts: 335
3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bear Bibeault
Marshal
Posts: 67313
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I think you're coming along nicely.
 
Never trust an airline that limits their passengers to one carry on iguana. Put this tiny ad in your shoe:
Java file APIs (DOC, XLS, PDF, and many more)
https://products.aspose.com/total/java
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!