Passing an array using Stencil JS, and it is not rendering on screen, but displays in the console - stenciljs

Question

export class ArraySample {
#Prop({ mutable: true }) arraydata: string;
#State() _arraydata: { name: string; value: string }[] = [];
#State() userInput: string
componentWillLoad() {
this.parseOptions();
}
#Watch("arraydata")
parseOptions() {
if (this.arraydata) {
this._arraydata = JSON.parse(this.arraydata);
}
}
Here is the place where I am facing the issue. I am mapping the array, but not able to get the result.
render() {
return (
<Host>
<div>{this._arraydata.length}</div>
{this._arraydata.map((x) => {
<div>
<h1>{x.name}</h1>
</div>;
console.log(x.name);
})}
</Host>
);
}
}

Answer 1

I tried to use your code and pass an array to render the component. I made slight changes and it works. Hopefully you'll be able to find what is missed in your code, cuz it looks straight forward.
import {
Component,
Prop,
h,
State,
Watch,
Host
} from '#stencil/core';
#Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
#Prop({
mutable: true
}) arraydata: string;
#State() _arraydata: Array < {
name: string;value: string
} > = [];
#State() userInput: string
componentWillLoad() {
this.parseOptions();
}
#Watch("arraydata")
parseOptions(): Array < string > {
if (this.arraydata) {
this._arraydata = JSON.parse(this.arraydata);
}
return []
}
render() {
return ( < Host > {
this._arraydata.length
} | {
this._arraydata.map(item => item)
} < /Host>)}
}
<my-component arrayData="[1,2,3,4,5]"></my-component>