Baking with StencilJS

app-home.tsx

import { Component } from '@stencil/core';


@Component({
  tag: 'app-home',
  styleUrl: 'app-home.scss'
})
export class AppHome {

  render() {
    return (
      <div>
        <the-oven ingredients={["milk", "eggs", "butter", "flour"]} />
      </div>
    );
  }
}

the-oven.tsx

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


@Component({
  tag: 'the-oven',
  styleUrl: 'the-oven.scss'
})
export class TheOven {
  
  @Prop() ingredients: any;

  @State() ingredientList: any;

  componentWillLoad() {
    this.ingredientList = typeof this.ingredients === 'string' ? JSON.parse(this.ingredients) : this.ingredients;
  }

  render() {
    return (
      <div>
        {this.ingredientList ? this.ingredientList.map((ingredient) => 
          <a>{ingredient}</a>
        ) : null }
      </div>
    );
  }
}