title: How to render HTMLCollection in react(passed as props)
body: <p>I have a component in react that receives a <code>HTMLCollection(10) [div, div, div, div, div, div, div, div, div, div]</code> as props, and placing the prop directly in the return throws an error. How does one render it such that is can be appended at the end of already existing children</p>
  <p><strong>Poor Example for context explanation</strong></p>
  <pre><code>export default function Block {
      const {children, HTMLCollectionChild} = props;
  
      return (
          &lt;div&gt;
              {children}
              {/*HTMLCollectionChild*/}
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p><strong>EDIT</strong></p>
  <p>The solution I found that seemed to work best is as follows</p>
  <pre><code>return(
      &lt;div&gt;
          {children}
          {HTMLCollectionChild
             ? HTMLCollectionChild.map((child) =&gt; {
              return createElement(
                 child.localName,
                { key: `${generate_key()} ${child.firstElementChild.currentSrc}` },
                createElement(&quot;img&quot;, { src: child.firstElementChild.currentSrc })
              );
            })
          : null}
  </code></pre>
  <p>The only downside was that, I needed to know the structure of the HTMLCollectionChild before attempting to render it</p>
  <p>for those needing further reading check <a href="https://reactjs.org/docs/react-api.html#createelement" rel="nofollow noreferrer">createElement</a> docs</p>