title: React: Tracking sibling elements across multiple parents
body: <p>The <a href="https://reactjs.org/docs/reconciliation.html#tradeoffs" rel="nofollow noreferrer">react docs</a> say:</p>
  <blockquote>
  <p>... In the current implementation, you can express the fact
  that a subtree has been moved amongst its siblings, but you cannot
  tell that it has moved somewhere else. The algorithm will rerender
  that full subtree.</p>
  </blockquote>
  <p>So the <code>key</code> parameter only matches children in the original tree with children in the subsequent tree for a single parent.</p>
  <p><strong>Is there a way to tell React a child has moved to another parent?
  Or another solution for tracking children for CSS transitions?</strong></p>
  <p><strong>For example:</strong></p>
  <p>If I use:</p>
  <pre><code>const [state, setState] = useState({ title1: [&quot;e1&quot;, &quot;e2&quot;, &quot;e4&quot;], title2: [&quot;e3&quot;] })
  </code></pre>
  <p>To return a list of lists to a render function:</p>
  <pre><code>return Object.keys(state).map((title) =&gt; (
      &lt;div key={title}&gt;
        {state[title].map((e) =&gt; (
          &lt;div key={e}&gt;{e}&lt;/div&gt;
        ))}
      &lt;/div&gt;
    ));
  </code></pre>
  <p>But then decide to move &quot;e4&quot; to title2 with an onClick somewhere:</p>
  <pre><code>&lt;button onClick = {onClick(&quot;e4&quot;,&quot;title2&quot;)}&gt;Move E4 to Title2&lt;/button&gt;
  </code></pre>
  <p>Using this onClick helper function:</p>
  <pre><code> const onClick = (elem, newtitle) =&gt; () =&gt;
      setState((s) =&gt; {
        const titles = Object.keys(s);
        const title = titles.filter((t) =&gt; s[t].includes(elem))[0]; //find which title contains the element
  
        return {
          ...s,
          [title]: s[title].filter((e) =&gt; e !== elem), // remove element from old title list
          [newTitle]: s[newTitle].concat(elem), //add it to new title list
        };
      });
  </code></pre>
  <p>This renders the new state, where e1, e2, e3, and their parents are all tracked using the key property, but e4 is rendered as a new element in title2.</p>
  <p>I don't even know where to start with this, or if it is even possible since the docs say it isn't possible out of the box.</p>
  <p>P.S I am wanting to do this for CSS transitions</p>