title: A state property that transparently calls `setState` whenever its value changes
body: <p>I would like to create a state object that combines both the state value itself and the ability to call <code>setState</code> whenever its value is changed. This way, e.g. on the interface between <a href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.21adyspc3" rel="nofollow">the container and the dumb component</a> I won't have to pass a separate setter for each state property.</p>
  
  <p>E.g. typically what gets done in the 'smart and dumb' pattern is the following:</p>
  
  <pre><code>let TextValueContainer = React.createClass({
      getInitialState: function () {
          return {value: ''};
      },
      setValue(v) {
          this.setState({value: v});
      },
      render: function() {
          return (
                  &lt;TextValue
                    value={this.state.value}
                    setValue={this.setValue}
                  /&gt;
          );
      }
  
  });
  
  let TextValue = React.createClass({
      propTypes: {
          value: React.PropTypes.string.isRequired,
          setValue: React.PropTypes.func.isRequired
      },
      render: function() {
          return (
                  &lt;input type={'text'}
                      onChange={function (ev) {
                        this.props.setValue(ev.target.value);
                      }.bind(this)}
                      value={this.props.value}
                  &gt;
                  &lt;/input&gt;
          );
      }
  });
  
  ReactDOM.render(&lt;TextValueContainer/&gt;, $('#app')[0]);
  </code></pre>
  
  <p>Observe how at the interface between the container and the dumb component two properties are passed: the state value itself (<code>value</code>) and a method to change it (<code>setValue</code>). For <code>N</code> separate state attributes I would need <code>2*N</code> <code>props</code> 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.</p>
  
  <p>I experimented a bit and come up with the following:</p>
  
  <pre><code>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 (
                  &lt;TextValue
                      valueHolder={this.state.valueHolder}
                  /&gt;
          );
      }
  
  });
  
  let TextValue = React.createClass({
      propTypes: {
          valueHolder: React.PropTypes.instanceOf(StateHolder).isRequired
      },
      render: function() {
          return (
                  &lt;input type={'text'}
                      onChange={function (ev) {
                                  this.props.valueHolder.setState(ev.target.value);
                                }.bind(this)}
                      value={this.props.valueHolder.v}
                  &gt;
                  &lt;/input&gt;
          );
      }
  });
  
  ReactDOM.render(&lt;TextValueContainer/&gt;, $('#app')[0]);
  </code></pre>
  
  <p>In the above implementation for each attribute, only a single <code>props</code> needs to be passed between the 'smart' and the 'dumb' component (in the example above <code>valueHolder</code>).</p>
  
  <p>My questions are:</p>
  
  <ol>
  <li>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)</li>
  <li>do you see any anti-patterns or code smells in the "solution" given above?</li>
  </ol>