A state property that transparently calls `setState` whenever its value changes - reactjs

Question

I would like to create a state object that combines both the state value itself and the ability to call setState whenever its value is changed. This way, e.g. on the interface between the container and the dumb component I won't have to pass a separate setter for each state property.
E.g. typically what gets done in the 'smart and dumb' pattern is the following:
let TextValueContainer = React.createClass({
getInitialState: function () {
return {value: ''};
},
setValue(v) {
this.setState({value: v});
},
render: function() {
return (
<TextValue
value={this.state.value}
setValue={this.setValue}
/>
);
}
});
let TextValue = React.createClass({
propTypes: {
value: React.PropTypes.string.isRequired,
setValue: React.PropTypes.func.isRequired
},
render: function() {
return (
<input type={'text'}
onChange={function (ev) {
this.props.setValue(ev.target.value);
}.bind(this)}
value={this.props.value}
>
</input>
);
}
});
ReactDOM.render(<TextValueContainer/>, $('#app')[0]);
Observe how at the interface between the container and the dumb component two properties are passed: the state value itself (value) and a method to change it (setValue). For N separate state attributes I would need 2*N props to be passed at the interface. Plus, there is no hard way looking at the code of the dumb component to figure out which setter is for which value.
I experimented a bit and come up with the following:
class StateHolder {
constructor(v, that) {
this.v = v;
this.setState = function(v2) {
this.setState(Object.assign({}
,this.state
,{valueHolder: new StateHolder(v2, that)}));
}.bind(that);
}
}
let TextValueContainer = React.createClass({
getInitialState: function () {
return {valueHolder: new StateHolder('', this)};
},
render: function() {
return (
<TextValue
valueHolder={this.state.valueHolder}
/>
);
}
});
let TextValue = React.createClass({
propTypes: {
valueHolder: React.PropTypes.instanceOf(StateHolder).isRequired
},
render: function() {
return (
<input type={'text'}
onChange={function (ev) {
this.props.valueHolder.setState(ev.target.value);
}.bind(this)}
value={this.props.valueHolder.v}
>
</input>
);
}
});
ReactDOM.render(<TextValueContainer/>, $('#app')[0]);
In the above implementation for each attribute, only a single props needs to be passed between the 'smart' and the 'dumb' component (in the example above valueHolder).
My questions are:
is there a simpler way to accomplish what I am trying to do? (i.e. simplify the interface between the 'smart' and the 'dumb' component and make explicit the association between the values passed down and their setter functions)
do you see any anti-patterns or code smells in the "solution" given above?

Answer 1

Looks like you'd want to take a look at some framework to manage your flow of data and the corresponding changes in the app state. I've been working with Redux a lot recently and I would recommend it. It's a very smart implementation of the Flux architecture. Your "stateHolder" concept is resolved in the Redux store.
From the Redux motivation page
Following in the steps of Flux, CQRS, and Event Sourcing, Redux
attempts to make state mutations predictable by imposing certain
restrictions on how and when updates can happen. These restrictions
are reflected in the three principles of Redux.
Of course, there are alternatives to Redux; the point is that what you're trying to do would become really hard to maintain and understand and that you should look at a generalised way to manage your state.

Answer 2

Tell me what do you think about this JSBin: http://jsbin.com/tofepoliha/edit?js,output
First, when declaring the TextValue element, instead of using value={this.state.value} value2={this.state.value2}, we pass the whole state in one action using the spread (...) operator.
<TextValue {...this.state} setValue={this.setValue} />
This way we don't need to repeat ourselves for each and every property. Now, for the setValue function - instead of having a special function for every property, we can simply declare one generic function, that gets the key and the value and sets it to the parent component's state:
setValue(value, v) {
this.setState({[value]: v});
}
Then, we can have as many inputs (or every other element for this matter) like so:
<input type="text" onChange={function (ev) {
this.props.setValue('value', ev.target.value);
}.bind(this)} value={this.props.value} />
<input type="text" onChange={function (ev) {
this.props.setValue('value2', ev.target.value);
}.bind(this)} value={this.props.value2} />