title: Interpolate a dynamic HTML element in React
body: <p>I have the following <code>JSON</code> contract which gets passed down to certain components that basically iterate over the format and render the data inside of <code>p</code> elements. However, I'd like the ability to set a custom HTML element instead of the default <code>p</code> element used.</p>
  
  <p>What are some good techniques for achieving this?</p>
  
  <p>For example:</p>
  
  <pre><code>// from
  const data = [{ text: 'hello' }, { text: 'world' }];
  // to 
  const data = [{ text: 'hello', element: 'span' }, { text: 'world', element: 'h1' }];
  </code></pre>
  
  <p>Basically iterates over each item in the array and uses their custom HTML element to render the text. I know one can achieve this by using React's non JSX syntax, however, these components are quite complex, so I'd ideally like to use JSX. Any thoughts? Maybe there's a way to combine the two (use non JSX for the custom elements and within them use JSX?</p>