Two way Binding in React...

​- Variables are Immutable, so don't use variables for storing data in React.
- Always recommended to use "State".

What is State?
Why we need State?

- Every web application uses protocol "http | https".    
- Http is a state less protocol.
- Http uses the mechanism
    "Go-Get-Forget"

    Go            - Establish connection with server
    GET        - Get Response from server
    Forget     - Clean up response details

- State less nature is good for server as it manages memory well.
- State less nature is a drawback for client if he need continous operations.
- Web application use various state management techniques
        a) Query String
        b) Cookie
        c) Session
        d) Application etc..
- React implicitly provides state to manage data.
- React version upto 17 state is available only for class components.
- React 18+ versions provide state for function components.
- React 18 uses "useState()" hook [method] for function components.

Note: It is always recommended to maintain your data in react state.

- State in function component is defined by using a hook "useState"
- useState is Generic type.
- It is open for any type and also restricts specific data type based on the value type initialized.

Syntax:
        import  {useState} from 'react';

- useState hook requires a getter and setter
- getter can access value stored in state.
- setter can set value into state.

Syntax:
            const  {getter, setter} = useState(initialValue);

- State in react can handle any type
    a) Primitive
    b) Non Primitive

Note: Any react 18 hook can't be used in class components.

FAQ: Why state is configured with const?
Ans : You can't use state without initialization.
        State must be ready before you start using component.
        "Component is initialized with state"

Syntax:
         
import { useState } from "react";

export function DataBindingComponent()
{
    const [userName, setUserName] = useState("John")
    return(
        <div className="container-fluid">
            <h2>One Way</h2>
            User Name : <input type="text" value={userName} />
            <p>
                Hello ! {userName}
            </p>
        </div>
    )
}

Ex:
import { useState } from "react";

export function DataBindingComponent()
{
    const [categories] = useState(["Electronics", "Footwear"]) ;
    return(
        <div className="container-fluid">
            <ol>
                {
                    categories.map(category=>
                        <li key={category}>{category}</li>
                        )
                }
            </ol>
        </div>
    )
}

                                  

Introducing..........

  Two Way Binding
- React doesn't support 2 way binding.
- You have to implement explicitly.
- Two way binding require Events in React.

Ex:
import { useState } from "react";

export function DataBindingComponent()
{
    const [userName, setUserName] = useState("david");

    function HandleUserName(e){
        setUserName(e.target.value);
    }

    return(
        <div className="container-fluid">
            <h2>Register User</h2>
            <dl>
                <dt>User Name</dt>
                <dd><input type="text" onKeyUp={HandleUserName} /></dd>
            </dl>
            <p>Hello ! {userName}</p>
        </div>
    )
}

Ex:
import { useState } from "react";

export function DataBindingComponent()
{
    const [Name, setName] = useState("");
    const [Price, setPrice] = useState(0);
    const [City, setCity] = useState("");
    const [Stock, setStock] = useState(false);
   

    function NameChange(e){
        setName(e.target.value);
    }
    function PriceChange(e){
        setPrice(e.target.value);
    }
    function CityChange(e){
        setCity(e.target.value);
    }
    function StockChange(e){
        setStock(e.target.checked);
    }

    return(
        <div className="container-fluid">
            <div className="row">
                <div className="col-3">
                    <h2>Register</h2>
                    <dl>
                        <dt>Name</dt>
                        <dd><input onChange={NameChange} type="text"/></dd>
                        <dt>Price</dt>
                        <dd><input onChange={PriceChange} type="number"/></dd>
                        <dt>City</dt>
                        <dd>
                            <select onChange={CityChange}>
                                <option>Delhi</option>
                                <option>Hyd</option>
                            </select>
                        </dd>
                        <dt>Stock</dt>
                        <dd className="form-switch">
                            <input onChange={StockChange} type="checkbox" className="form-check-input" /> Available
                        </dd>
                    </dl>
                </div>
                <div className="col-9">
                    <h2>Details</h2>
                    <dl>
                        <dt>Name</dt>
                        <dd>{Name}</dd>
                        <dt>Price</dt>
                        <dd>{Price}</dd>
                        <dt>City</dt>
                        <dd>{City}</dd>
                        <dt>Stock</dt>
                        <dd>{(Stock==true)?"Avaialble":"Out of Stock"}</dd>
                    </dl>
                </div>
            </div>
        </div>
    )
}