DEV Community

Julian Christian Anderson
Julian Christian Anderson

Posted on

Vue vs React Episode 0: Handling Form

I have been learning Vue and React for the past couple months in my coding bootcamp. The first thing I learned is Vue then I learned React. I could not say which one is better because each one of them has their own strengths and their own weaknesses. For me learning Vue is relatively easier from learning React but not by a huge margin. I will make a series on the differences between the two frameworks. 
This first thing I felt when I dive into React after working with Vue is how different they handle Form input. Vue has two way binding on its data because of this v-model, This is the main reason why they can handle form differently.

Handling Form in Vue

In Vue we have v-model which can bind the value from the input to the state or we usually call it data.

  • You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. - vuejs.org *

If you see the gist file we put v-model on each input to bind their state to the input. On the first input we bind email and on the second input we bind password. By filling the input the state/data will also be changed because of the v-model. When you press submit you can see in your browser console :
Console

It works like magic in Vue which is very awesome!

Handling Form in React

On the other side, React does not have any features similar to the v-model on Vue. So we should handle Form differently in react.

In react we can put name on each input, the name we put on the input should be the same with the name on the state.

<input type="email" name="email" placeholder="email" />
Enter fullscreen mode Exit fullscreen mode

Why?
Because we should handle the input with onChange every time we type in the input box.

<input type="email" name="email" placeholder="email" 
onChange={this.formChange} />
Enter fullscreen mode Exit fullscreen mode
formChange = e =>{
this.setState({
  [e.target.name] : e.target.value
})
Enter fullscreen mode Exit fullscreen mode

This function will handle the change on the input box. Every time it changes we will also change the state. e.target.value is the value of the things we put into the input. And if you try to console.log e.target.name it will show that name is equal to the name we assign to the form input. If we put it email then it will be email and if we put it password it will be password. This is the reason why the name we put on the input it must be the same as the state name we have. So basically :

[e.target.name] : e.target.value
Enter fullscreen mode Exit fullscreen mode

will result in :

email : (input value from email)
// or
password : (input value from password)
Enter fullscreen mode Exit fullscreen mode

If we put the name in the input as my_email and my_password then e.target.name will be my_email and my_password . We don't have a state with the name of my_email and my_password . So our state will still be an empty string.

Then we will provide the same method named "submit" to handle the button click event.

submit = () =>{
   console.log('email :', this.state.email)
   console.log('password : ', this.state.password)
   this.setState({
     email : '',
     password : ''
   })
 }
Enter fullscreen mode Exit fullscreen mode

The handle event is the same with Vue but when you empty the state the input won't change into an empty string because of the one way binding. To handle that we should put value property to the input.

<input type="email" name="email" placeholder="email" 
onChange={this.formChange} value={this.state.email} />
Enter fullscreen mode Exit fullscreen mode

By putting value we refer the value of the input to the state so if we empty the state the form input will be empty too.
This is the first episode on comparing React to Vue. I hope that it helps for those who wanted to learn Vue with the basic of React or learning React with the basic of Vue. There are more episodes to come so stay tuned!
I post in my Instagram daily about my journey in web development and also sharing the progress of my articles.



Top comments (4)

Collapse
 
speirwang profile image
He Wang • Edited

Vue has two way binding on its data, React only has one way binding. This is not ture.

If you read Vue doc about the form vuejs.org/v2/guide/forms.html
It says clearly that v-model is just a syntax sugar. React lets you use the raw way to create the two-way binding, but technically speaking, they are the same.

Collapse
 
juliancanderson profile image
Julian Christian Anderson

hi. let me make a revision on that so it won't be misleading. thank you!

Collapse
 
speirwang profile image
He Wang

No worries at all!

Collapse
 
eladc profile image
Elad Cohen

You put the same form.vue code for react