How to render HTMLCollection in react(passed as props)

Question

I have a component in react that receives a HTMLCollection(10) [div, div, div, div, div, div, div, div, div, div] 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

Poor Example for context explanation

export default function Block {
    const {children, HTMLCollectionChild} = props;

    return (
        <div>
            {children}
            {/*HTMLCollectionChild*/}
        </div>
    )
}

EDIT

The solution I found that seemed to work best is as follows

return(
    <div>
        {children}
        {HTMLCollectionChild
           ? HTMLCollectionChild.map((child) => {
            return createElement(
               child.localName,
              { key: `${generate_key()} ${child.firstElementChild.currentSrc}` },
              createElement("img", { src: child.firstElementChild.currentSrc })
            );
          })
        : null}

The only downside was that, I needed to know the structure of the HTMLCollectionChild before attempting to render it

for those needing further reading check createElement docs

Might recommend taking a peek at this article: flaviocopes.com/how-to-render-html-react — Nick
With map. HTMLCollectionChild.map( item => (<div dangerouslySetInnerHTML={{ __html: item.innerHTML }}></div>) — JB_DELR
when I attempt this I get Error: Can only set one of `children` or `props.dangerouslySetInnerHTML`. — Jjkivai
what if you use a spread operator? like ...HTMLCollectionChild — cursorsdottsx

ZealousWeb ZealousWeb · Accepted Answer · 2020-12-15T07:42:47

You could use html-react-parser package.

import parse from 'html-react-parser';

and then use it like

HTMLCOllectionChild.map(item => (parse(item)))

For more details regarding the package, go to https://www.npmjs.com/package/html-react-parser

How to render HTMLCollection in react(passed as props)

1 Answers