title: React.js 2-way bindings: two-levels deep path in valueLink
body: <p>My state is:</p>
  
  <pre><code>[
    {type: "translateX", x: 10},
    {type: "scaleX", x: 1.2}
  ]
  </code></pre>
  
  <p>I’m using <a href="http://facebook.github.io/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a> and I can’t provide a valid key string for <code>linkState</code>:</p>
  
  <pre><code>this.state.map(function(item, i) {
    return &lt;div&gt;&lt;input valueLink={this.linkState( ??? )}&gt;&lt;/div&gt;
  }
  </code></pre>
  
  <p>Would be nice if <code>this.linkState</code> accepted some query syntax, such as <code>"0.type"</code> to retrieve  <code>"translateX"</code> from my example.</p>
  
  <p>Are there any workarounds?</p>
  
  <hr>
  
  <p>I wrote <strong><a href="https://gist.github.com/NV/8622188">DeepLinkState mixin</a></strong> which is a drop-in replacement for React.addons.LinkedStateMixin. Usage example:</p>
  
  <pre><code>this.state.map(function(item, i) {
    return &lt;div&gt;&lt;input valueLink={this.linkState([i, "x"])}&gt;&lt;/div&gt;
  }
  </code></pre>
  
  <p><code>linkState("0.x")</code> is also acceptable syntax.</p>