title: How to dynamically change the react element in jsx
body: <p>I would like to refactor some legacy code. The use case is this. Someone previously had created a new component that basically had all the exact same attributes as the old component. The render method returns either old or new based on a flag, but the attribute values are all the same. This results in many redundant lines that were copy pasted.</p>
  <pre><code>  return (
           isSomeBoolTrue ? (&lt;OriginalComponent a={a} b={b} ..... z={z} /&gt;):
                            (&lt;NewComponent a={a} b={b} ..... z={z} /&gt;)
      );
  </code></pre>
  <p>I'd like some way to remove the duplicate attributes and have it look something like this:</p>
  <pre><code>return (isSomeBoolTrue ? (&lt;OriginalComponent):(&lt;NewComponent) a={a} b={b} .... /&gt;
  </code></pre>