Part 9 : Method call from Child Component to Parent

#5 Minutes Of Reading

In this article I will show you how to pass parameter to method while updating react component on click of button.
Open App.js file and replace highlighted piece of code.

There are three buttons and two button created to explain Arrow function in javascript. If arrow function written in one line no need to type return keyword by default it will return (line number 44). But arrow function is not written or exceed line of code more than one line then you must need to write return keyword (line number 45). I have created 3 buttons and all are doing same thing but different way of implementation. Bind keyword (line number 43) for sending/passing data to method is more efficient than arrow function.

Click on Modify data and observe changes in below screen.

Click on other two button, basically all buttons modifying UI and in background all three-button sending parameter to method which is updating data in background for react component.
Now I want apply click event on 4th card (ID:103) highlighted above screen. But ID field is part of employee component which is child and App is parent component. But actual state managed in App component and I want to perform onclick from Employee component which is stateless. Basically I want to perform same operation which is currently ModifyData button click is performing. H2 tag of employee component also perform same operation or calling same method which is implemented for modifyData button.
But the problem here is modifyData method available in App.js and I want to call this method in Employee.Js. To achieve this, I will pass reference of method (modifyData) as property from App component to Employee component. Shown in below screen highlighted.

Update Employee.Js file and add click event.

Save file and switch to browser window. Click on h2 tag of forth card which is (Id: 103) and it change name of employee on first card.

Click on Id:103 highlighted, it will replace name from Arti to Sahil.