React Two-Way Binding
Tags: react, codenewbie, programming, javascript
Published: 2021-01-02 22:49:38

###### *This article is sponsored by [Flutterwave](https://dashboard.flutterwave.com/signup?referrals=RV686851) - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!*

React two-way binding allows keeping the current state when viewed and allowing access to the viewed state for changes. That is, you never lose the current state but get updated. The two most common event types allowing changes in a state are `onChange` and `onClick`.

In the *Person/Person.js* file, the attribute `onChanged` gets fired when the input changes. The `{props.changed}` is passed as a reference to execute methods in the **App.js**.

See the example below:

```jsx
import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
            <h3>ID: {props.id}</h3>
            <input type="text" onChange={props.changedName} />
        </div>
    );
};

export default Person;
```


Let's concentrate on one component.

**Person/Person.js**
```jsx
import React from 'react';
import { useState } from 'react';
import './App.css';
import Person from './Person/Person';

const App = () => {
  const [state, setState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
    ]
  });

  const personNameHandler = event => {
    setState({
      persons: [
        { name: event.target.value, language: 'React', id: '2sdr3' },
      ],
    })
  };

  return (
    <div>
      <Person
        name={state.persons[0].name}
        language={state.persons[0].language}
        id={state.persons[0].id} 
        changedName={personNameHandler}/>
    </div>
  );
};

export default App;
```

{% stackblitz react-ckojvo %}

In the code snippet above, the event object allows access to the input field to enter values. The issue is the targeted input field does not hold the initial value, `Bello`. To have the name `Bello` in view before changing the state, the value needs to be set in the field by default. That is, the `onChanged` attribute needs to be overridden by the `value` attribute. 

See the example below:

**Person/Person.js**
```jsx
import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
            <h3>ID: {props.id}</h3>
            <input
                type="text"
                onChange={props.changedName}
                value={props.name} />
        </div>
    );
};

export default Person;
```

{% stackblitz react-yrc1jx %}

Notice the attribute, `value={props.name}` overriding the `onChange` attribute.

Now we can view the name, `Bello`, and update the viewed name to any other name by typing into the input field. This is what is called **Two-way Binding** in React.

*Note*: In *App.js*, the onChanged was bound to `props.changed` because it holds a reference to the `personNameHandler` function in the **Person/Person.js**.

**Happy Coding!!!**

<a href="https://www.buymeacoffee.com/bellotech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

#### Techstack | Flutterwave 
Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!  Also, you get a Flutterwave dollar barter card when you [signup](https://dashboard.flutterwave.com/signup?referrals=RV686851). Open an online store and take your business anywhere in the world.

{% youtube ClXVUM3Rf7A %}

[Sign up today to get started](https://dashboard.flutterwave.com/signup?referrals=RV686851)

[Support](https://dashboard.flutterwave.com/donate/3lo9klliqwbu) what I do and push me to keep making free content.