How to pass element to render as output of a callback function

[fortesp]

Hello,
I need help coming up with a solution here, hopefully someone can help.
I want to do something like the code snippet below illustrates. My real case is a bit more complex, that code is just to give better explanation of what i am trying to achieve. I have a stencil component that would be for instance a "datatreeview" which receives a data array to render all elements and what i want to do is to render the output of a callback function depending on the item entry passed as a parameter.
This seems to work if the function is in stencil library, but i try to do this in react part, it gives the error:
TypeError: Cannot add property $elm$, object is not extensible

So basically i want to render a JSX element that comes from the outside as a return value of a callback function.
Any ideas?

Thanks a lot.

// Parent component
const myRenderFunction = (item: any) => {
  return <div>{`This is my item: ${item}`}</div>;
};

<MyListComponent data={[1, 2, 3]} renderItem={myRenderFunction} />

// MyListComponent
import { Prop, h } from '@stencil/core';

export class MyListComponent {
  @Prop() data: any[] = [];
  @Prop() renderItem: (item: any) => any;

  render() {
    return (
      <div>
        {this.data.map((item) => this.renderItem(item))}
      </div>
    );
  }
}

[rramsey]

From https://stackoverflow.com/questions/39396792/jsx-with-a-html-tag-from-a-variable:

public GetLarge = 'h1';
public getSmall = 'h5';

render() {
  return <section>
    <this.GetLarge>
      hello world
    </this.GetLarge>
    <this.getSmall>
      small text
    </this.getSmall>
  </section>
}

One person said that the variable need to start upper case, but I didn't have to do that. This correctly renders h1 and h5 tags.

But I was never able to make it work dynamically where you could use a function and pass in a value. If you want that level of sophistication you'll probably need to create all of the elements if React.createElement will work. Alternately you could have functions that return a render() and some if statements. Depends on exactly how your age is structured and what it needs.