Define width and background-color of a div with StencilJS

I have an array with some properties (values are variable).

[{"color": "#2c8646",
  "value": 30
 },
 {"color": "#69c0f9",
  "value": 50 }]

And then, I need to return divs with that, something like:

render(){
  return (
 <div class="SomeClass" style="width: array[0].value ; background-color: array[0].color" >
)

The matter is that style in StencilJS doesn't work like that. I can't use a static css file due that the Array is different any time.

Any idea?

TIA

I need to do something like

this.objArray.forEach(element => {

      if(element.color == undefined || element.color == null || element.color == '')
      {
        element.color = this.colors[this.index];
        this.index = this.index == (this.colors.length - 1) ? 0 : (this.index += 1 );
      }

      if(element.value == null  || element.value == 0  )
        element.value = 100;

      if(element.tooltip == null )
        element.tooltip = '';

     return <div class style={`width:${element.value}; background-color ${element.color}`> </div>;

    });

Stencil allows for styles to be dynamic - a simple example that we can build on would look somethings like this:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  shadow: true,
})
export class MyComponent {
  render() {
    return <div style={{ background: "#ffe7e8", border: "2px solid #e66465" }}>Hello, World! I'm Stencil</div>;
  }
}

where we just output "Hello World, I'm Stencil!" in a red bordered and pink-ish background.

Note that here, the contents of the style attribute has two curly braces - one to denote that we have an object literal:

{ background: "#ffe7e8", border: "2px solid #e66465" }

and an outer pair surrounding that object literal to tell Stencil to interpolate/read this value.

We can then add an array of styles, and use the map() function in order to show a div for each style:

import { Component, h } from '@stencil/core';

type Styles = Record<string, string>[];

const myStyles: Styles = [
  { background: "#ffe7e8", border: "2px solid #e66465" },
  { background: "#26b72b", border: "1px dashed blue" }
]

@Component({
  tag: 'my-component',
  shadow: true,
})
export class MyComponent {
  render() {
    return (<div>{myStyles.map((myStyle) => <div style={myStyle}>Hello, World! I'm Stencil</div>)}</div>);
  }
}

Note that:

1. Styles is just an array containing a mapping of strings to strings
2. myStyles contains two different styles for us to iterate over
3. We use map() in the render function - this is necessary in order to have a new div returned for each and every entry in myStyles.
4. We use only one set of curly braces, as myStyle in the render function is already an object

Using map is important, as forEach does not return a new value for each iteration. If I were to change my render function to:

  render() {
    return (<div>{myStyles.forEach((myStyle) => <div style={myStyle}>Hello, World! I'm Stencil</div>)}</div>);
  }

Nothing would render.

To make your forEach workable, I'd suggest changing:

1. forEach to a map
2. updating the style generation logic to build an object literal instead of a string like so:

const newStyle = {
  width: element.value,
  background-color: element.color
};
return <div class style={newStyle}> </div>;