Part 13 : Edit Employee Card

In this article, I will show you how to update name of a employee from employee card efficiently. I already shown this in article 10 but not in efficient way. This is good time to discuss and implement in efficient way. Source code available here
From below screen if I update textbox value the label field of employee name automatically updated.

Initially it was John and I have updated 007 in textbox which also update Name of employee on card.
Let’s implement this functionality in efficiently. React expect key while updating anything on react with list (map function). Key help react to update records efficiently on DOM. Application will work without key also but it gives warning on browser console (Press F12 on browser and open console).
Add EditText highlighted in below screen to update name of employee card from textbox. Edit text is method which perform edit operation in background.

UpdateNameHandler is arrow function called from EditText. It expect two parameter actual event object and id of employee.
At line number 30, … followed by this.state.employees array. Three dots represents spread operator and spread operator is used to copy data from existing object and stored in newly created variable/object.

Run application and check browser in action.

Change name in above highlighted textbox shown in screen. Label field of sam also changed according to textbox value shown below.