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
Laravel 9 MongoDB CRUD Operation Tutorial
Laravel 9 MongoDB CRUD Operati...

In this article, we will see the laravel 9 MongoDB crud operation tutorial. In laravel, we will have many crud operation...

Read More

Dec-06-2022

Google Map With Draggable Marker Example
Google Map With Draggable Mark...

In this example I will show you how to add a google map to your website, In many websites you can see they have added ma...

Read More

Jun-11-2020

How to Upgrade from Angular 14 to Angular 15
How to Upgrade from Angular 14...

As a developer, keeping up with the latest advancements in Angular is crucial to stay ahead in the rapidly evolving worl...

Read More

May-31-2023

Laravel 9 Livewire Sweetalert Example
Laravel 9 Livewire Sweetalert...

In this article, we will see the laravel 9 livewire sweet alert example. Here we will learn how to use sweetalert i...

Read More

Nov-25-2022