React Two-Way Binding

React Two-Way Binding

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article
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 it 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!!!


Buy me a Coffee


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.

 
Share this

Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.

Proudly part of