How To Bind Data In 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.

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.

 

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.

 

 

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:

• Read Also: How To Use Array In React JS
• Read Also: How To Create React JS Application
• Read Also: Two Way Data Binding In Angular 12
• Read Also: How To Install React JS Step By Step