Passing data to a stencil component in index.html
<app-root
data="{<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d4d7d6f5d2d8d4dcd99bd6dad8">[email protected]</a>, <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6929390b6919b979f9ad895999b">[email protected]</a>}"
</app-root>
Creating the App-root Stencil Component
import { Component, h, Prop } from "@stencil/core";
@Component({
tag: "app-root",
styleUrl: "app-root.css",
shadow: true,
})
export class AppRoot {
@Prop() data: [];
render() {
return (
<div>
{this.data.map(m => {
return <div>
<h1>{m}</h1>
</div>
})}
</div>
);
}
}
Need help in displaying single data inside an h1 tag without it showing as undefined on the screen.