How can we return a customer created element in JS to the render of the webcomponent in stenciljs

Question

I have a component which has a custom method to create an element, I create a custom element using js and return the array how can we use this array or elements/element to the be returned as a render element

Note: createCustomElement will have dynamic implementation

import { Component, Element, Prop, State } from '@stencil/core'


@Component({
  tag: 'common-listing',
  shadow: true,
})
export class CommonListing {
  @Element() el: HTMLElement

  @Prop() columns: any

  @State() list: Array<any> = []

  @State() click: string = 'CLic'

  async componentWillLoad() {
    const res = await fetch('http://localhost:3000/users')
    const data = await res.json()
    this.list = data
  }
  createCustomElement(l: any) {
    let div = document.createElement('div')
    let span = document.createElement('span')
    span.innerText = l['user_id']
    div.appendChild(span)
  }
  render() {
    let content = this.list.map(l => this.createCustomElement(l))
    return content
  }
}

Answer 1

The render method has to return JSX elements:

render() {
  return this.list.map(l => <div><span>{l['user_id']}</span></div>);
}