title: React: creating and referencing dynamic component refs
body: <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>