- Data binding is the process of accessing data from source and binding to UI.
- Identifying the changes in UI and updating back to source.
- Data Binding is handled in JavaScript and jQuery by using
a) DOM Methods
b) DOM Events
- React simplifies the data binding.
- Data binding is of 2 types
a) One Way Binding
b) Two Way Binding
- React supports only "One Way Binding".
- One Way Binding is the process of accessing from source and binding to UI.
It is unidirectional.
- React uses data binding expression "{ }"
- React can bind any data without using DOM methods.
Syntax:
var username = "John";
<div> Hello ! {username} </div>
Ex:
data-binding.component.js
export function DataBindingComponent()
{
var product = {
Name: "Samsung TV",
Price: 44500.44,
Stock: true
}
return(
<div className="container-fluid">
<h2>Product Details</h2>
<dl>
<dt>Name</dt>
<dd>{product.Name}</dd>
<dd><input type="text" value={product.Name}/></dd>
<dt>Price</dt>
<dd>{product.Price}</dd>
<dt>Stock</dt>
<dd>{(product.Stock==true)?"Available":"Out of Stock"}</dd>
</dl>
</div>
)
}
collection.map(function(item){
})
Note: Every iterating item which is generated dynamically must have a unique key in React.
Syntax:
collection.map(item=> <li key={item}> { item } </li>)
Ex: Array Type
data-binding.component.js
export function DataBindingComponent()
{
var categories = ["All", "Electronics", "Footwear", "Fashion"];
return(
<div className="container-fluid">
<h2>Arrays</h2>
<ol>
{
categories.map(category=>
<li key={category}>{category}</li>
)
}
</ol>
<select>
{
categories.map(category=>
<option key={category}>{category}</option>
)
}
</select>
<ul className="list-unstyled">
{
categories.map(category=>
<li key={category}><input type="checkbox"/> {category}</li>
)
}
</ul>
<div>
{
categories.map(category=>
<div key={category}>
<button className="w-25">{category}</button>
</div>
)
}
</div>
</div>
)
}
Ex: Array of Objects
data-binding.component.js
export function DataBindingComponent()
{
var products = [
{Name: "TV", Price: 45000.44, Stock: true},
{Name: "Mobile", Price: 34000.33, Stock: false},
{Name: "Nike Casuals", Price:5200.44, Stock:true}
];
return(
<div className="container-fluid">
<h2>Products Table</h2>
<table className="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{
products.map(product=>
<tr key={product.Name}>
<td>{product.Name}</td>
<td>{product.Price}</td>
<td>{(product.Stock==true)?"Available":"Out of Stock"}</td>
<td>
<button className="btn btn-info"><span className="bi bi-eye-fill"></span></button>
<button className="btn btn-warning ms-2"><span className="bi bi-pen"></span></button>
<button className="btn btn-danger ms-2"><span className="bi bi-trash"></span></button>
</td>
</tr>
)
}
</tbody>
</table>
</div>
)
}
Ex: Nested Data
data-binding.component.js
export function DataBindingComponent()
{
var menu = [
{Category: "Electronics", Products: ["TV", "Mobile"]},
{Category: "Footwear", Products: ["Nike Casuals", "Lee Boot"]}
];
return(
<div className="container-fluid">
<h2>Select Category</h2>
{
menu.map(item=>
<details key={item.Category}>
<summary>{item.Category}</summary>
<ul>
{
item.Products.map(product=>
<li key={product}>{product}</li>
)
}
</ul>
</details>
)
}
<h2>Shopping Menu</h2>
<ol>
{
menu.map(item=>
<li key={item.Category}>
{item.Category}
<ul>
{
item.Products.map(product=>
<li key={product}>{product}</li>
)
}
</ul>
</li>
)
}
</ol>
<h2>Select Product</h2>
<select>
{
menu.map(item=>
<optgroup label={item.Category} key={item.Category}>
{
item.Products.map(product=>
<option key={product}>{product}</option>
)
}
</optgroup>
)
}
</select>
</div>
)
}
Ex: Bootstrap Cards
data-binding.component.js
export function DataBindingComponent()
{
var courses = [
{Title: "ASP.NET", Poster: "asp.jpg", Topics:["Web", "API","MVC"]},
{Title: "AWS", Poster: "aws.jpg", Topics:["Cloud","Services","Database"]},
{Title: "Digital Marketing", Poster: "dm.jpg", Topics:["Cloud","Services","Database"]},
{Title: "Data Science", Poster: "ds.jpg", Topics:["Cloud","Services","Database"]}
]
return(
<div className="container-fluid">
<h2>Courses</h2>
<div className="d-flex flex-wrap">
{
courses.map(course=>
<div className="card m-2 p-2">
<img src={course.Poster} className="card-img-top" height="150" />
<div className="card-header">
<h3>{course.Title}</h3>
</div>
<div className="card-body">
<ul>
{
course.Topics.map(topic=>
<li>{topic}</li>
)
}
</ul>
</div>
<div className="card-footer">
<button className="btn btn-primary w-100">Join Course</button>
</div>
</div>
)
}
</div>
</div>
)
}
.