React Two-Way Binding

This article is 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!

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:

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

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;

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

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;

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!!!

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. Open an online store and take your business anywhere in the world.

Sign up today to get started

Support what I do and push me to keep making free content.