# React Tutorial: Two way data binding

Paul Shan Sat Apr 05 2014
Facebook react was not really made for two way data binding.  But by adding a little complexity we can make two way data binding easily. Normally in facebook react data flows only in one direction; that is, parent to child. So when a data is modified in parent, that reflects to the child but to reflect the changed data of child to the parent, you have to notify the parent about the change of value of child and also have to take appropriate action. There are three ways you can follow to achieve two way data binding in react.

## Objective

We will have two components, named ‘InputBox’ and ‘DisplayContainer’. The ‘DisplayContainer’ will display a state variable of it and ‘InputBox’ will be a child of ‘DisplayContainer’, which will have a textbox in it. The state variable ‘value’ of the component ‘DisplaContainer’ in initialized with ‘My Value’, and is passed through prop to the child. Once you run the program you will see ‘My Value’ is reflecting to the textbox of ‘InputBox’ component. This is the default binding facebook react provides; data flowing automatically from parent to child. Now you can follow any of the following two processes to send the modified data back to parent and once you done that the modified data will again reflect every child from the parent automatically. So what you need to do is send the modified data back to the parent. If you are not very much clear about how react basically works, you may go through how to develop your first react application.

## Manually notifying the parent

var DisplayContainer1 = React.createClass({
updateValue:function(modifiedValue){
this.setState({
value:modifiedValue
})
},
getInitialState:function(){
return{
value:'My Value'
}
},
render:function(){
return (

{this.state.value}

);
}
});

var InputBox1 = React.createClass({
update:function(){
var modifiedValue=this.refs.inputValue.getDOMNode().value;
this.props.updateValue(modifiedValue);
},
render:function(){
return ()
}
});

React.renderComponent(,document.getElementById("container1"));

In this case what we are doing is, once the value of the textbox in ‘InputBox1’ component is changed, we are calling a function of that component, named ‘update’. There we are storing the current value of the textbox in a variable named ‘modifiedValue’ and passing it as a parameter and calling the function updateValue() of the parent component ‘DisplayContainer1’, which was passed through ‘prop’. The ‘updateValue()’ function of ‘DisplayContainer1’ change the state variable ‘value’ and once it is changed, the modified value will be reflected everywhere as, ‘DisplayContainer1’ is the owner of the state ‘value’.

var DisplayContainer2 = React.createClass({
getInitialState:function(){
return{
value:'My Value'
}
},
render:function(){
return (

{this.state.value}

);
}
});

var InputBox2 = React.createClass({
render:function(){
return ()
}
});

React.renderComponent(,document.getElementById("container2"));

var DisplayContainer3 = React.createClass({
update:function(modifiedValue){
this.setState({value: modifiedValue});
},
getInitialState:function(){
return{
value:'My Value'
}
},
render:function(){
value: this.state.value,
requestChange: this.update
};
return (

{this.state.value}

);
}
});

var InputBox3 = React.createClass({
render:function(){
return ()
}
});

React.renderComponent(,document.getElementById("container3"));

Well, what reactLink does in back, we also can follow that approach without using the ReactLink mixing. We just have to create an object and name it whatever you want (as here I’ve given customValueLink). Inside that object make two variables, ‘value’ and ‘requestChange’ and assign them the state variable and a function which will update your state variable respectively. And that’s it; you now can use your custom ReactLink variable just like the original one. It will work just like ReactLinkMixin.

Written By

## Paul Shan

• E

• R

• C

• S

### SEO

Search engine optimization

• E

• C

### CMS

wordpress, drupal, jumla, magento and more

Show All

### Tags

vue-js
Web development
vue css
social share buttons
real-life-example
react datetime picker
progra
Online
MathJax
jsfiddle
jquery chart library
instant search using vue
handlebars
event loop
Design
console.log
best practices
imorph

Show All