lit-element passing data from one component to another

Question

I am currently learning how to user lit-element v2.0.0-rc.2 I have two components app.js and list-items.js. In app.js I am collecting data from local storage and storing it in this.todoList, Im then calling this.todoList in my list-items.js but the problem I am running into is that it is not passing the data as an array but as an object, I am trying to output that data in list-items all Im getting when I do a console.log of this.todoList is [object] in my

tags it is rendering out with dots for the tag but no data. I was wondering If i could get some help in understanding why this is happening . here is my code app.js ''' import {LitElement, html} from 'lit-element'; import './add-item'; import './list-items';

class TodoApp extends LitElement{

static get properties(){
    return{
        todoList: Array
    }
}

constructor(){
    super();
    let list = JSON.parse(localStorage.getItem('todo-list'));
    this.todoList = list === null ? [] : list;

}

render(){
    return html `
    <h1>Hello todo App</h1> 
    <add-item></add-item>  
    <list-items todoList=${this.todoList}></list-items>     
    `;
    }
}

customElements.define('todo-app', TodoApp)

list-items.js
import { LitElement, html } from 'lit-element';
import {repeat} from 'lit-html/directives/repeat.js';
import './todo-item';

class ListItems extends LitElement {
static get properties(){
    return{
        todoList: Array
    }
}

constructor(){
    super();
    this.todoList = [];

}

render(){
    console.log(this.todoList)
    return html `
        <ul>${repeat(this.todoList, (todo) => html`<todo-item 
todoItem=${todo.item}></todo-item`)}</ul>
    `;
    }
}

customElements.define('list-items', ListItems);
'''

the result I am looking for is the for the data stored in local storage to be listed on my rendered page.

Regulation

seems like you did the same tutorial I'm doing. Did you ever finish the code? – Starchy

Yes I did , I followed the answer given by Thad . – Regulation

Answer 1

Attributes are always text. Because todoList an array, it's a property, not attribute. Try binding as a property: .todoList="${this.todoList}". See https://lit-element.polymer-project.org/guide/templates#bind-properties-to-child-elements (Updated link for Lit, https://lit.dev/docs/templates/expressions/#property-expressions)

Carmon

Thad thank you for the help this answered my question and I learned more in the process always good when that happens. Thanks again – Regulation