How to use map on Object in stencil

Question

In index.html data is passed to stencil component

<app-root
      data="{abc@gmail.com,def@gmail.com}"
</app-root>

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>
  }
}

How to get single data inside h1 tag, while using this way it shows undefined on the screen.

score 1 · Answer 1 · answered Jun 25 '20 at 09:41

Assuming you're using <app-root> in an HTML file (not TSX) you can only pass primitive types (string, number, boolean). If you want to pass an array you will have to manually parse it, see Stencil object properties are not set, when they provided through the HTML string.

Then the attribute value should be a valid JSON array (["abc@gmail.com", "def@gmail.com"])

In your case instead of JSON.parse you could also pass a comma separated list and create an array with split(','), in which case the attribute value should be abc@gmail.com,def@gmail.com.

score 1 · Answer 2 · answered Jun 26 '20 at 11:30

You can't set non-primitives as property values in HTML. You can set them via JavaScript though:

<app-root></app-root>

<script>
  document.querySelector('app-root').data = ['abc@gmail.com', 'def@gmail.com'];
</script>

Note that {abc@gmail.com,def@gmail.com} is not a valid array in JavaScript/Typescript. You should also assign an empty array as a default value to your data prop, so that it doesn't fail to render if data is unset (which is why you're seeing "undefined" on the screen).

@Prop() data = [];

If you want to improve the type of your prop, you can define it as a string array by doing

@Prop() data: string[] = [];

How to use map on Object in stencil

2 Answers2