StencilJS @Prop() variable is undefined

Question

I created a stencil component () that uses another stencil component () in the rendered template.

One of the props (key: string) passed from smg-compound-filter to smg-filter is undefined, whereas the other props are well defined. I made sure that {filter.key} is defined in the template of smg-compound-filter, and i even tried to pass a literal string to smg-filter, but it's undefined in this component. I think i am missing something. If someone could give me an insight, it will be bery helpful.

smg-compound-filter.ts (render function)

  render() {
    return (
        <div class="smg-filter-container">

            <div class={`filters`}>
                    this.filters.map(filter => {
                        return (
                            <div class='filter'>
                                <smg-filter
                                    key={filter.key} // even "str" doesn't work
                                    label={filter.label}
                                    target={filter.target}
                                    options={filter.options}
                                    customClasses='secondary'
                                    onFilterChanged={(event) => {this.toggleOption(event)}}
                                >
                                </smg-filter>
                            </div>
                        );
                    })
            </div>
        </div>
    );
  }

smg-filter.ts

export class SmgFilter {
  @State() filter: Filter;

  @State() showOptions: boolean;

  /** custom classes to adapt style */
  @Prop() customClasses: string;

  /** smartsheet column linked to the filter */
  @Prop() key: string;

  /** label of the filter */
  @Prop() label: string;

  /** options */
  @Prop() options: FilterOption[];

  /** type of products to be filtered: 'master' or 'product' */
  @Prop() target: FilterTarget;

  @Event() filterChanged: EventEmitter<Filter>;

  componentWillLoad() {
    console.log(this.key); // undefined

    this.showOptions = !isSecondary ? true : false;
    this.filter = {
        key: this.key,
        target: this.target,
        label: this.label,
        options: this.options,
    };
  }

Answer 1

That's because key is a reserved keyword since Stencil uses it to improve loop rerender performance.

I'm not 100% sure if it can be changed or disabled but I think you'll have to use another property name.