CODEWITHSUNDEEP
lit-element
Sheena
Sheena

Reputation: 16212

How to pass nested data structures as properties in LitElement?

In a parent component I have something like:

render() => {
    const data = {a:1,b:[1,2,3]}; // of course this is a simplified version of the code
    return html`<child-component data=${data}></child-component>`
}

Which is basically equivalent to:

render() => {
    const data = {a:1,b:[1,2,3]}; // of course this is a simplified version of the code
    return html`<child-component data="[object Object]"></child-component>`
}

Which is basically useless...

Is there a simple way to pass complex object hierarchies into litElement components?

As far as I can tell, my options are:

Option 1. Use attributes: I'm a bit of a litElement noob so I'm not sure if this will work and I'm not sure how to make it work without having to make extra function calls. It would be nice if I could just do all the necessary work inside html.

Research in progress.

Option 2. Use Json.

Stringify the object in the parent component

render() => {
    const data = {a:1,b:[1,2,3]}; // of course this is a simplified version of the code
    return html`<child-component data=${JSON.stringify(data)}></child-component>`
}

then parse the json in the child component.

This just seems a bit inelegant to me though.

But it works.

Upvotes: 0

Views: 2633

Answers (1)

Alan D&#225;valos
Alan D&#225;valos

Reputation: 2698

In this case what you probably want is to pass the object as a property rather than as an attribute. For complex data such as objects, arrays, functions, etc. that's the preferred method.

You can do it with the following syntax:

render() => {
  const data = {a:1,b:[1,2,3]};
  // note the period (.), that's the token used to identify that you're passing data as a property
  return html`<child-component .data=${data}></child-component>`
}

In general, you should probably give Lit's templating guide a read as some of the most common use cases are covered throughout it.

Upvotes: 5

Related Questions