How To Bind Data In React JS

Websolutionstuff | Aug-19-2022 | Categories : React JS

In this article, we will see how to bind data in React JS. Also, we will see how to bind the variable value in the UI and the input fields. We can simply use the curly brace to bind the variable. Data Binding is the process of connecting the view element or user interface, with the data which populates it. if you want to display the updated variable value to UI is not easy. We need to use the useState Hook.

So, let's see data binding in React JS or two way data binding in React JS.

Binding Variable:

The binding variable is simple. we need to declare a variable in a single curly brace.

function App() {
    let name="Websolutionstuff"

    return ( 
    <div className = "App" >
        <p>Hello {name}</p>
     </div>
    );
}

export default App;

 

 

Next, create a method and in the function, change the name and create a button and bind a click event with the button using the newly created function.

function App() {
    let name="Websolutionstuff"
    const changeName =()=>{
        name="Websolutionstuff | Web developing Website"
        console.log(name)
    }

    return ( 
    <div className = "App" >
        <p>Hello {name}</p>
        
       <button onClick={changeName}>Change Name</button>
     </div>
    );
}

export default App;

 If you click the button, the variable value is changed. However, it does not change the display value. Why because the variable is not reactive to adopt the changes. To address this problem, React introduces the useState hook.

 

useState Hook:

The useState hook is nothing but a syntax with a predefined setter function. The setter function is a normal function that is used to set the value for the variable.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

const [var, setVar] = useState(value)

#Example

const [name, setName ] = useState('Websolutionstuff')

name: It is a variable name here.

setName: It is a setter function, which is used to set values.

Use camel case for setter function. for example, if your variable is age, then the setter function is setAge.

Now, create a variable with the useState hook and change the value using the setter function.

import {useState} from 'react';

function App() {

    const [name,setName]=useState("Websolutionstuff")
    
    const changeName =()=>{
        setName("Websolutionstuff | Web developing Website")
    }

    return ( 
    <div className = "App" >
        <p>Hello {name}</p>
       <button onClick={changeName}>Change Name</button>
     </div>
    );
}

export default App;

If you click the button, then the value will be changed. So if you want a variable to update its display value, then always use useState Hook.

 

 

Input Field Binding:

Now, we will see how to bind the variables to input fields using the useState hook.

import {useState} from 'react';
function App() {
  
    const [age,setAge]=useState(30)
    
    const changeAge =()=>{
        setAge(45)
    }

    return ( 
    <div className = "App" >
        <p>Your age is {age}</p>
        
       <button onClick={changeAge}>Change Age</button>
       <br/>
       <input value={age} onChange={(e)=>setAge(e.target.value)} />
     </div>
    );
}

export default App;

 


You might also like:

Recommended Post
Featured Post
Custom Toastr Notification In Laravel 9
Custom Toastr Notification In...

In this article, we will see a custom toastr notification in laravel 9. we will create a custom notification using HTML,...

Read More

Sep-23-2022

How To Generate Barcode In Laravel
How To Generate Barcode In Lar...

In this tutorial, I will show you how to generate barcodes using the milon/barcode package. In this example, we wil...

Read More

Jun-06-2020

How to Use ngStyle in Angular for Dynamic Styling?
How to Use ngStyle in Angular...

A user-friendly and dynamic interface is paramount to engaging users on your site. Angular is one of the most powerful a...

Read More

Oct-04-2023

How To Fix cURL Error 60 SSL Certificate Problem
How To Fix cURL Error 60 SSL C...

In this example we see how to fix cURL error 60 SSL certificate problem. cURL error 60: SSL certificate proble...

Read More

Dec-08-2021