React Tutorial: Two way data binding

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.


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.

facebook react two way data binding

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

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

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.

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.

 live-demo-button download-button

Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • I appreciate this tutorial; seems clearer than React’s own official article on the subject. Thank you.

  • markocen

    Great article!