title: Refs for dynamically generated components in React?
body: <p>The code below is a minimal working example to explain my problem. This code generates 3 Note components using Array.map and when you hit enter in them it empties the  statically generated Note component above them using a ref to its DOM element. </p>
  
  <p>What I want to do is instead have the Note you hit enter in empty itself. I think this would require generating a dynamic array containing {id, ref} for each Note, so I could pass the Note id to handleKeyDown then search the refs array for that id and use the corresponding ref to change the DOM element. But I'm having trouble figuring out how to actually do this.</p>
  
  <p>I realize using refs here isn't necessary but it's just an example since my actual code is a lot longer and calls focus().</p>
  
  <pre><code>import React, { Component } from "react";
  import "./App.css";
  
  class App extends Component {
    constructor() {
      super();
      this.notes = [
        { text: "Hello world 1", id: 1 },
        { text: "Hello world 2", id: 2 },
        { text: "Hello world 3", id: 3 }
      ];
      this.ref = React.createRef();
    }
  
    handleKeyDown = event =&gt; {
      if (event.key === "Enter") {
        event.preventDefault();
        this.ref.current.textContent = "";
      }
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;Note
            text={"StaticNote"}
            key={0}
            id={0}
            handleKeyDown={this.handleKeyDown}
            innerRef={this.ref}
          /&gt;
          {this.notes.map(note =&gt; (
            &lt;Note
              text={note.text}
              key={note.id}
              id={note.id}
              handleKeyDown={this.handleKeyDown}
            /&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  
  class Note extends Component {
    render() {
      return (
        &lt;p
          ref={this.props.innerRef}
          contentEditable
          onKeyDown={this.props.handleKeyDown}
        &gt;
          {this.props.text}
        &lt;/p&gt;
      );
    }
  }
  
  export default App;
  </code></pre>