Part 7: Update Component data using button(event).

In this article I will show you to change Html on browser using button click event. In previous article I shown you to render data from newly component to browser, now I will change the content of component on click of button.
You can download source code from here. Once you download source code, create new react application and replace src folder in newly created react application. You will get src folder using above link from github.
Open App.js file and update code shown in below screen. If you noticed in this article, I have created JavaScript class and not using function for rendering component and function is commented at line number 7 which I shown you till previous article.
I have to create a class because I need some functionality which is available in Component class. Component is class provided from react library and I have created App class in App.js file and my App class is inheriting component class using extends keyword.
Actually, I’m using state property from component class to hold data in state property shown in line number 8. Also now no hardcode value in rendered method, please check piece of code from line number 23 to 26.

To access value from state property in Employee component Name property {this.state.employee[0].name} and so on.

Run react application using npm start command and check browser.

Again, come back to application and open App.js, let’s add button and on click of button will change html data rendered on browser window in above screen. Add below highlighted code in App.js file.

Html button element created at line number 39, onclick it calls function modifyData (line number 17) to modify data in employee component. Move to browser window and click on Modify Data button. Noticed below highlighted data gets changed.

You can even pass text from Component as children shown in below screen.

In below screen Header message also printing from state property high

lighted in red color box.