import {Task, TaskStatus} from '@lit-labs/task';
// ...

export class MyElement extends LitElement {

  @state()
  private _userId: number = 7;
  
  private _apiTask = new Task(
      this, 
      ([dependencyParam1]) => fetch(`//jsonplaceholder.typicode.com/users/${dependencyParam1}`)
          .then(response => response.json()),
      () => [this._userId]   // dependencies getter -> returns array of dependencyParameters
    );

  render() {
     return html`
         <div>user</div>
         ${this._apiTask.render({ 
            pending: () => 'loading', 
            complete: (user) => `${user.name}` 
         })}`;
  }

import {html, LitElement} from 'lit';
import {customElement, state} from 'lit/decorators.js';
import {Task, TaskStatus} from '@lit-labs/task';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {

  @state()
  private _userId: number = 7;
  
  private _apiTask = new Task(
      this, 
      ([dependencyParam1]) => fetch(`//jsonplaceholder.typicode.com/users/${dependencyParam1}`)
          .then(response => response.json()),
      () => [this._userId] // dependencies getter -> returns array of dependencyParameters
    );

  render() {
    const pending = () => html`Loading user info...`;
    const complete = (user) => html`${user.name}`;
    return html`<p>Hello ${this._apiTask.render({ pending, complete })}</p>`;
  }
  
  // correct syntax
  // render() {
  //   return html`
  //       <div>user</div>
  //       ${this._apiTask.render({ 
  //          pending: () => 'loading', 
  //          complete: (user) => `${user.name}` 
  //       })}`;
  }

}