React JS One Way Data Binding?

React JS is one way data binding, means the flow of data from parent to children is possible not from children to parent components. The parent components controls the flow of data. In the one way process, we send the data from parent component to the child components where child components generate a User Interface and manages the data.

let's understand with the example,

Parent Component

DisplayProduct.jsx

import Product from "../UI/Product"
import products from "../Product.json"
const DisplayProducts =()=>{
    return(
        <>
        {
            products.map((product,index)=>
      <Product key={index} image={product.product_image_url} title={product.product_title} price={product.product_price}/>
            )
        }
        </>
    )
}
export default DisplayProducts        

parent components is passing the product image, product title and product price to the Product file, which is a child component. The parent component is receiving all the values from the JSON array containing multiple object. Each object in the array represents a product with specific properties. This parent component handle state and logic.

Child Component

Product.jsx

import "../styles/Product.css"
const Product=({image,title,price})=>{
return(
<>
<div className="ProductContainer">
    <div className="firstContainer">
    <img src={image} alt="" />
    </div>
    <div className="SecondContainer">
    <h5>Watch Details</h5>
    <p> Name: {title}</p>
    <p>Price: {price}</p>
    </div>
</div>
</>

)
}
export default Product        

The data passed from the parent component as a properties to the child component. We use destructuring properties to access the image, title and the price of the product. Then the Product.jsx receives these data and used them to display all the information of the product.

In this way, props (short for properties) are used to transfer data from parent to child components and achieving the one way data binding in React JS.

Several advantages of this mechanism:

• This unidirectional flow makes its easier to understand the how data changes through the application.
• Effective in managing and handling the Errors as you can separate the problem more efficiently.
• Improved performance as data flow is one way and it only re-renders the parts that are changed.