Data and Input Field Binding In React

useState Hook Example

In this tutorial, we are going to see, how to bind the variable value to the UI and input fields. Binding the variable to UI is a very easy task. We can simply use the single curly brace to bind the variable. However, if you want to display the updated variable value to UI, it is not easy and we need to do some extra work to do this task. Why because the variables in React are not reactive by default. To make the variables reactive, we need to use the useState Hook.

Binding Variable:

Like said earlier, we can easily bind the variable using the single curly brace. So, declare a variable named employee_name in the App.js file like below.

let employee_name="Raja"

And now bind it using a single curly brace.

If you preview the output on the browser, you are able to see the employee name.

Next, create a function and in the function, change the employee name. Now create a button and bind a click event with the button using the…