javascript - data flow in react application -

i learning react , have run problem of elegently extracting states components.

basically have few components contains forms , other inputs need data in business logic, data need coupled state of component. understand data should have unidirectional flow can't think of how can make data flow towards business logic. make interface functions call respective, feel violate unidirectional flow.

anyhelp examples appreciated!

you typically pass down callbacks parent components child components props. when state changes in of child components, invokes callback , passes whatever data appropriate in each use case. "controller-view" (the root component implements actual callback) whatever business logic need based on current state , updates state accordingly (causing re-render of component tree component down). read docs component communication.

something this:

var child = react.createclass({     ontextchange: function() {          var val = 13; // somehow calculate new value          this.props.ontextchange(val);     },     render: function() {         return <input type="text" value={this.props.val} onchange={this.ontextchange} />     } });  var parent = react.createclass({     ontextchange: function(val) {          var newval = somebusinesslogic(val);          this.setstate({val: newval});     },     render: function() {         return <child ontextchange={this.ontextchange} val={this.state.val} />     } });