I recently had to refactor a React Form when working with multiple inputs and I thought I'd share how I did it.
This is how my form looks like:
...
For further actions, you may consider blocking this person and/or reporting abuse
Hi this method works fine for multiple input but just with normal input fields. What if their are some booleans and arrays??? E.g In vue.js I have the following data model which change at some point in time, which in that case two way data binding make it way easier for us.
Thank you so much!! I'm learning about controlled forms, and this has been incredibly helpful!
Amazing perofrmance. Very thanks!
very good , but I don't like it. Now you have to maintain the names of the inputs, which is a string. It's a bug waiting to happen.
I suggest using this solution: stackoverflow.com/a/47707719/1079002
btw, do you have solution for nested objects? I need that, thanks!
Hi, just wanted to ask ,
since we are changing the state in handleInputChange
therefore, every time we will type in something the whole component will re-render since the state is changing
so isn't it an expensive approach in respect to performance?
Amazing Deborah ! ☺️☺️
Thanks for providing with an useful information in a synchronize manner ...
Amazing perofrmance. Very thanks!
Thank you so much, I was handling this terrible, but with your handleChange I was able to refactor the entire event! fav*
Wow, that exactly what I was looking for
Thank you
The spread operator has not used the in-class component. and this what I am looking for thanks for the exact answer :)
Really clean.
Thank you so much!
This is beautiful!
Awesome article!
for example if I wanted to insert two value in input how do I go by that
value={values.position} for example onChange=" {(e)=> this.onChangeInput(e)}; { handleChange }; "
Thanks for the explanation. Kudos
thanks a lot iam actually looking for it thanks again
Can we map the input filed using an array of states. So that we can reduce the code size. Is it possible to do that?
Noice , i like that Deborah
When using state like this same example I am getting warning - input type is getting uncontrolled
when I use seperate state for all feilds I don't get this error