Create components from function (loop/map)

Jira Development Jira Cloud
,
1

Hi,
I am getting an html formatted text back from API. I need to create a parser that will loop through the html elements and turn them to forge-ui components. My code looks like this:

                    <Fragment>
                        <Heading size="large">{JSON.stringify(formState[recordIndex].id)}</Heading>
                        <Heading>{JSON.stringify(formState[recordIndex].name).slice(1, -1)}</Heading>
                        <Fragment id="description">{(JSON.stringify(formState[recordIndex].usdesc).slice(1, -1)).split('<div>').map((line) => { <DescriptionItem tpcode={line} /> })}</Fragment>
                        {formState[recordIndex].comments.length > 0 && <Text>💬{JSON.stringify(formState[recordIndex].comments).slice(1, -1)}</Text>}
                        <Text><Badge appearance="default" text={JSON.stringify(formState[recordIndex].feature.name).slice(1, -1)} /></Text>
                    </Fragment>

DescriptionItem is a simple compound component like this (for now):

    const DescriptionItem = props => {
        return (
            <Fragment>
                <Text>{props.tpcode}</Text>
            </Fragment>
        );
    };

It does not work (only the description part) - it does not even render the nodes in virtual DOM. Is there any workaround for that? What is wrong with my code?