Hello, in this tutorial, we'll go over what does it mean for One-way and Two-way data binding.
One-way and Two-way data binding
Learn what it means for One-way and Two-way data binding for inputs
Setup
Before we get started, we need to setup a few things.
Step 1:
Create a Component.
function DataBinding(){
return (
<div>
</div>
);
}
export default DataBinding;
Step 2:
Add an input element inside the component.
function DataBinding(){
return (
<div>
<input />
</div>
);
}
Step 3:
Add the component to the App component.
function App() {
return (
<DataBinding />
);
}
Step 4:
Start the React application
What is One-way and Two-way data binding
Once you have done the setup, we can start talking about what is One-way and Two-way data binding.
Data binding refers to the process of synchronizing data between multiple sources.
One-way data binding means that data flows in a single direction, typically from the component to a variable or property and not the other way around.
Two-way data binding is a concept where data is synchronized in both directions, so Point A can change Point B and when Point B changes, Point A also reflect that change.
One-way binding excercise
We already went over One-way data binding in the other tutorials (Interpolation and useState Hook).
In those tutorials, we used a useState Hook and displayed it's value using interpolation in the HTML.
Now, we'll do it again in preparation for Two-way data binding.
Step 1:
Import useState.
import { useState } from 'react';
Step 2:
Create a useState hook with a default value of "Hello".
let [ value, setValue ] = useState("Hello");
Step 3:
Insert a <p> element inside the component, above the input element, and use interpolation to add the value to the HTML.
function DataBinding(){
let [ value, setValue ] = useState("");
return (
<div>
<p>{value}</p>
<input />
</div>
);
}
As you can see, we created a One-way data binding scenario where the value is set and it flowed into the <p> element.
To expand the One-way data flow, do the other steps below.
Step 4:
Add a onChange event to the input. This way, we can execute a function whenever the value of the input is changed.
<input onChange={}/>
Step 5:
Create a handler function for the onChange event with one parameter call event.
function onInputChanged(event) {
}
Step 6:
Set the handler function into the onChange event.
<input onChange={onInputChanged}/>
Step 7:
As you saw in the Events tutorial, every event returns an event object that contains information about it.
We can get that event object, simply by including an parameter for it in the handler function.
function onInputChanged(event) {}
Add a console.log statement and print out the event info.
function onInputChanged(event) {
console.log(event);
}
Step 8:
Save the project and open the Developer console for the browser (usually F12). Then type in the input.
You should start seeing some stuff being logged.
If you expand one, you should see a property call target, and inside it is a property called value which contains the text that was typed in the input.
Step 9:
Under the console.log statement in the event handler function, use the mutator function and set the value to event.target.value.
function onInputChanged(event) {
console.log(event);
setValue(event.target.value);
}
Now when you save the changes and start typing again, the value of the text should reflect whatever you typed in the input.
To recap, the One-way data binding occurred when we created useState and interpolated it in the HTML.
useState ---> <p>{value}</p>
We then created another One-way binding scenario when we added an onChange event to the input and wrote logic to change the value of the useState using it's mutator function.
<input .../> ---> useState ---> <p>{value}</p>
The input is updating the value of the useState so it is flowing in 1 direction.
Two-way binding exercise
In the One-way data binding exercise, we bound the useState with the input.
<input .../> ---> useState
In the One-way data binding exercise, we bound the useState with the input and whenever we typed the data flowed into the useState and changed it's value.
Now we'll see how to create a Two-way data binding scenario where - when the useState is updated, so will the input.
<input .../> < == > useState
Step 1:
Add a button under the <input> element in the component.
function DataBinding(){
let [ value, setValue ] = useState("");
return (
<div>
<p>{value}</p>
<input />
<button type="button">Two-way Data Binding</button>
</div>
);
}
Step 2:
Create a onClick handler function and apply it to the button's onClick event.
function DataBinding(){
let [ value, setValue ] = useState("");
//...
function onButtonClicked(event) {
}
return (
<div>
<p>{value}</p>
<input />
<button type="button" onClick={onButtonClicked}>Two-way Data Binding</button>
</div>
);
}
Step 3:
Inside the onClick handler function, use the useState mutator function and set it to some striing.
function onButtonClicked(event) {
setValue("Codeible!");
}
Step 4:
Start typing on the input.
Step 5:
Click on the Button that was created earlier. You should see it will change the text to whatever you put in the handler function.
Notice how when the button change the text, the text in the input has not changed.
The concept of Two-way data binding refers to when the source (input in this case) that changes the value of the data it is bound to, it should also change when the value is changed.
To do this, we'll need to update the text of the input with the new value as well. For inputs, we can use the value prop and use interpolation to set it to the value of the useState.
Step 6:
Add the value prop to the input and use interpolation to bring the value of useState into the input.
<div>
<p>{value}</p>
<input value={value} onChange={onInputChanged}/>
<button type="button" onClick={onButtonClicked}>Two-way Data Binding</button>
</div>
Now when we repeat the steps from 4 and 5, the value of the useState and input should be syncronized.
That is all for One-way and Two-way data binding. As you saw, in One-way, data is changed in one direction. In Two-way data binding, the value can also effect the source that can change its value.
