React: creating and referencing dynamic component refs
<p>I'm trying to keep track of an arbitrary amount of sub components.</p>

<p>Normally you would just reference this.refs.refName, but in my case I have an arbitrary amount of refs I need to keep track of.</p>

<p>Here's a concise example:</p>

<pre><code>var NamesList = React.createClass({
  getAllNames: function() {
    // Somehow return an array of names...

    var names = [];
    this.refs.????.forEach(function (span) {
      names.push(span.textContent);
    })
  },

  render: function() {
    var names = ['jack','fred','bob','carl'];
    var spans = [];

    names.forEach(function (name) {
      spans.push(&lt;span contentEditable={true} ref='?????'&gt;name&lt;/span&gt;);
    });

    return (
      &lt;div&gt;
        {spans}
      &lt;/div&gt;;
    );
  }
});

ReactDOM.render(&lt;NamesList&gt;&lt;/NamesList&gt;, mountNode);
</code></pre>

<p>If I'm approaching the problem incorrectly let me know. My desired outcome is to pass in data from a RESTful service to a React component, allow the user to edit that data, and export it again when needed. I've been unable to find an answer to this in the React refs docs.</p>