Part 10: Two way binding

# 5 minutes of reading

In this article I want to implement two-way binding with textbox available in each card. By default, in html text field it shows name of employee. If someone modify the text in html text field, employee name under header tag gets change. Let’s see implementation bellow.

I Ihave created separate handler with name EditText highlighted below. Now here rather hardcoding name I’m using event object and event object contain html text and I will get value of text using event.target.value shown in line number 38.
Add property in Employee tag which contain reference of EditText method. I’m passing method reference as property from App.js to Employee component.

Now let’s modify Employee.js and modify JSX code/ employee component. Add textbox for each card.

Switch to browser and check now.

This is not expected, but it will work like this lets check piece of code written in EditText method.
For all name field I’m updating event.target.value. To fix this I have to create 4 different methods

Switch to browser window change name in first textbox.

Again, there are limitations with this piece of code which I will cover as we progress through with this course.