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’.

Using ReactLink Mixin

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

				
{this.state.value}
				
			
		);
	}
});

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

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

Using ReactLinkMixin things are very easy. To use ReactLink you must include the react library react-with-addons.js to your html page. Once you include you are ready to use ReactLink. In this case, instead of sending a state variable as a property, you send a ReactLink. If you are using ReactLinkMixin, you can get a ReactLink of a state variable by using this.linkState(‘stateVarName’). This returns a ReactLink variable which has two properties inside it; ‘value’ and ‘requestChange()’. ‘value’ returns the value of the ReactLink and ‘requestChange()’ is fired automatically once your variable is changed. So by using ReactLink you don’t have to manually update anything in your parent or owner; it does all this from back automatically. Update: LinkedStateMixin is deprecated after react v15 and you need to use the package react-addons-linked-state-mixin

var DisplayContainer3 = React.createClass({
	update:function(modifiedValue){
		this.setState({value: modifiedValue});
	},
	getInitialState:function(){
		return{
			value:'My Value'
		}
	},
	render:function(){
		var customValueLink={
			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.