Fetch data from DB using Stencil Js Component

Do the following to fetch data from an API

  1. Need a placeholder API or a live API
  2. Create a component
import { Component, Prop, State } from '@stencil/core';

@Component({
    tag: 'load-more-component',
    styleUrl: 'load-more-component.css'
})
export class LoadMoreComponent {

    // Indicate that name should be a public property on the component
    @Prop() total: string;

    @State() content :Array<any>;

    @State() URL:any;
    
    
    componentWillLoad() {
        this.URL = 'https://jsonplaceholder.typicode.com/posts/' + this.total;
        return fetch(this.URL)
            .then(response => response.json())
            .then(data => {
                this.content = data;
                console.log(data);
            });
    }

    render() {
        return (
            <p>
                Total item {this.total}
            </p>
        );
    }
}

Html

<body>
  <load-more-component total="10"></load-more-component>
</body>