Dealing with input fields in React [value, useState(), onChange] ??

Contributed to a React project ????

Today I added two input fields to the app’s component

For Example ??

<label> Wallete Address </label>
<input 
type: “text”
value: {walletAddress}
onChage={handleWalletAddrChange}
/>        

As we can see here, these two attributes [value and onChange] are essential.

type: “text”? → It specifies that the input field is for text input

value: {walletAddress} → Binds the value of the input field to the walletAddress state variable

Q) The first question is, why have we used a State variable instead of a normal one here? ??

?? See, to answer this, we have to discuss the state variables.

So what is a State Variable?

In React, state variables are used to manage the dynamic data of a component.

There is a built-in utility function (aka hook) in React,

useState()        

that allows us to have a state variable in a functional component.

When we use useState(), it returns two values :?

?– the current value of the state

– and a function to update that state value

Const [walletAddress, setWalletAddress] = useState(“”);        

We can define the initial value of the state variable, by passing the argument to the useState() function.

?useState(“”) →? as in our case we have passed an empty string

Here, we have stored the current value i.e., “” (empty string), to the state variable named ‘walletAddress’

And stored the function provided by React to update the value of the state variable in ‘setWalletAddress’

?? State variables trigger re-renders when their values change. This is essential for React to efficiently update the DOM and reflect changes in the user interface.

Whereas, Normal variables get updated but do not trigger the re-renders.

So this is the reason why we used a State variable instead of a normal variable.

Now, What is this `value: {walletAddress}` is doing?

? By setting the value attribute of the input field to {walletAddress}, we are binding the value of the input field directly to the walletAddress state variable.

? It establishes a unidirectional data flow from the state to the input field.

? This means that the initial value displayed in the input field comes from the walletAddress state variable (or state).

? Any subsequent changes to the walletAddress state are immediately reflected in the input field’s value.

??But, How does the value of the `walletAddress` get updated whenever a user types some value in the input field????

Now here comes our onChange attribute ??

The onChange attribute is an event handler that specifies a function to be called whenever the value of an input field changes.

onChage={handleWalletAddrChange}        

– Whenever a user interacts with the input field by typing text, an onChange event is triggered.

– The value of onChange is set to handleWalletAddrChange, which is a reference to a function defined elsewhere in the component.

const handleWalletAddrChange = (event) => {
    setWalletAddress(event.target.value);
}        

– handleWalletAddrChange is the event handling function that will be invoked when the onChange event occurs.

– This function is responsible for processing the event and updating the value of the state variable.

– By default, React passes an event object as the first parameter to the event handling function (handleWalletAddrChange).

– This event object contains information about the event, such as the new value of the input field.

– Inside the function(handleWalletAddrChange) we can access the new value of the input field through the event object event.target.value

– We are updating the state variable associated with the input field by doing :

 setWalletAddress(event.target.value);        

– Updating the state triggers a re-render of the component, and the input field displays the new value stored in the state variable. ??

Summary:

? Initially, the 'walletAddress' state is an empty string (“”), so the input field stars with no value displayed.

? When the user types in the input field, the 'onChange' event is triggered.

? The 'handleWalletAddrChange' function is invoked, this function updates the walletAddress state with the new value entered by the user.

?Since the input field’s value is bound to the 'walletAddress'? state, React automatically re-renders the input field with the updated value from the walletAddress state.

? As a result, the input field always displays the current value stored in the 'walletAddress' state, ensuring synchronization between the input field and the component’s state.

Thank you for Reading ???