Learning ReactJS: Two-Way Data Binding
Data Binding in simple words is a process of binding or connecting the UI Elements (tables, lists, tabs) with the data that is used to populate the UI Elements.
Unlike AngularJS which provides Two-Way Data Binding, ReactJS provides One-Way-Data Binding. In this tutorial we will be learning about One-Way-Data Binding in ReactJS.
1. One Way Data Binding
As the name suggests, in one way data binding the connection between the data and the UI elements in one way.
a. Component to View
b. View to Component
In Component to View model any change in the component data will reflect in the UI automatically, for example If a list, l1= [A,B,C,D,E,F], is rendered in the UI as a table then adding/removing item in the list l1 will automatically add/remove row in the table.
In View to component model any change in the UI will reflect in the component Data automatically, for example if the list l1 is rendered in the UI as a table with each row having an option to add/delete the row. Then on adding or deleting the row the component data is also changed.
ReactJS provides Component to View type One-Way-Data Binding.
import React, { useState } from 'react';
import Grid from '@mui/material/Grid';export function OneWayDataBinding (props)
{
const data = ['A','B','C','D','E','F'];
return(
<Grid container>
<Grid container item xs={12} direction="row"
justifyContent="center" alignItems="center"
style={{
background: "#314b80", borderRadius: '7px 7px 0px 0px',
color: '#e8effb'
}}
>
<p style={{fontSize: '17px'}}>One-Way Data Binding</p>
</Grid>
<Grid container item xs={12}>
<div style={{ width: '100%'}}>
<table style={{ width: '100%'}}>
<tbody>
{data ? data.map((item,index) => {
return(
<tr id={index} key={index}>
<td style={{
width: '100%', padding: '3%',
background: 'white'}}
>
Item {item}
</td>
</tr>
)
}) : null}
</tbody>
</table>
</div> </Grid>
</Grid>
)
};
In the above code-example we are rendering the list as a table in the View.
const data = [‘A’,’B’,’C’,’D’,’E’,’F’];Since ReactJS provides One-Way Component To View Data Binding, any change in the UI will not modify the Component data but changes made in the Component Data will reflect in the View. So, deleting or adding new items in the table will not change the list but deleting or adding new item in list will reflect automatically in the View.
2. Implementing Two-Way DataBinding in ReactJS
Today we will learn how to modify the component Data using the View elements such as InputBox, Checkbox etc, which in turn updates the View automatically as ReactJS provides Component to View Data Binding. Using this technique we can implement functionality similar to Two-Way-Data Binding.
Step1: Convert the Data Component to State Variable with a Setter
const [data, setData] = useState(['A','B','C','D','E','F']);Now we have converted data to StateVariable whenever the data is updated through any function/operation the View will be re-rendered automatically. To update data we have also provided a binded-function called setData, using that we can add/delete values.
Step2: Bind setData Function to an event using eventListeners
We are using an Text Input element to add new Values so we can bind the keyboard event onKeyPress/onChange to the function that updates the Component Data.
<TextField label="Add New Item" variant="outlined" value= {newItem}
onKeyPress={(event) => AddNewItem(event)}
helperText={newItem.length > 0 ? "Press Enter to Add" : ""}
onChange={(event) => {setNewItem(event.target.value)}}
/>Here we are reading the user input to a new variable called newItem and when Enter is pressed we are using the value of newItem and adding in the list.
Using OnChange event Listener we are capturing the user input to the variable newItem.
Using onKeyPress we are listening to the Enter keyboard event and adding new item to the list(data)
function AddNewItem(event){
if (event.charCode === 13){ // Looking for Enter
var temp= data // Copying the List (data) to temp
temp.push([newItem,true]) // Adding newItem in temp
setData(temp) // Copying temp to List (data)
setNewItem("");
}
}Similarly we are updating the UI using the checkbox. We have not covered that in this tutorial, but you can find the code in the below github link
DataBinding Branch Link: ReactJS-Concepts/ReactJS-Concepts at DataBinding (github.com)
Read more of my articles on ReactJS and other awesome React packages
Part 1: How to create a new React App | by KIHSA Rai | Medium | Medium
Part 2: Easy Way To Create ReactJS Components | by KIHSA Rai | Jul, 2021 | Medium
1. DRAG & DROP : REACT BEAUTIFUL DND | by KIHSA Rai | Jul, 2021 | Medium
