import { Component, h, Prop, State } from "@stencil/core";

@Component({
  tag: "parent-component"
})
export class MyParent {

  @Prop() carddata: any;

  render() {
    return (
      <div>
        <child-component
          carddata={this.carddata}
        />
      </div>
    );
  }
}

import { Component, Prop, h } from "@stencil/core";

@Component({
  tag: "child-component"
})
export class MyChild {

  @Prop() carddata: any;

  renderItems(items: string[]): string {
    let newString = "";
    items.map((item: string) => {
      newString = newString.concat(item, ", ");
    });
    return newString.substr(0, newString.length - 2);
  }

  render() {
    const { items } = JSON.parse(this.carddata);
    return (
      <p>
        Items: <b>{this.renderItems(items)}</b>
      </p>
    );
  }
}

[...]

import * as cardData from "./card-mock-data.json";

[...]

  render() {
    return (
      <Wrap>
        <parent-component
        carddata={JSON.stringify(cardData)}/>
      </Wrap>
    );
  }

[...]

ChildComponent.prototype.renderItems= function (items) {
    var newString = "";
    items.map(function (item) {
        newString = newString.concat(item, ", ");
    });
    return newString.substr(0, newString.length - 2);
};