Using 4.X api and TypeScript to create a custom widget. I'm having trouble rendering nested lists. My render method renders a list of layer groups, and lists of layers within each group:
render() {
const groupList = this.viewModel.layerGroups.map((layerGroup: LayerGroup, i) =>
<div key={i} data-layer={layerGroup} onclick={this._expand} id={layerGroup.group}> {layerGroup.group}
<div id={layerGroup.group + "_container"} class={CSS.layerGroup + ' ' + CSS.layerGroup__hidden}>
{layerGroup.layers.map(layer => <div data-layer = {layer} class={layer.status==="active" ? CSS.layerActive: CSS.layerInactive} onclick={this._toggle}>{layer.name}</div>)}
</div>
</div>);
return (<div>{groupList}</div>);
}
The problem I have is that this renders the layer containers as children of the group element. Because of this, any time a click event happens on a layer (to call _toggle), an event happens on the group (inadvertently calling _expand), since the layer is within the group. How can I add elements to my VDOM so that they are appended, rather than added as children?
In other words, with nested lists like:
groups = [ { name: group1, layers: [layer1, layer2, layer3] } { name: group2, layers: [layer4, layer5] } ... ],
how can I get a structure like this:
<div id='group'>{group name}</div>
<div id='container'>
<div> Layer Item </div>
...
</div>
instead of what I'm currently getting:
<div id='group'> {group name}
<div id='container'>
<div> Layer Item </div>
...
</div>
</div>
