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!!!
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.
Support what I do and push me to keep making free content.