Nested lists of components

[denartha10]

Hi,

I have a nested list of componets inside another componet but all I get rendered is [object HTMLDivElement]

I have put together a toy problem with the same issue and was hoping someone might be able to help me out with a solution that would render the components correctly

const {div, h1, button} = van.tags const ChildNode = ({color, text}) => div( { style: `background-color: ${color}; width: 50px; aspect-ratio: 1/1;` }, h1(text) ) const Parent = () => { const nodes = van.state([]) return div( { id: 'random-sample-id', style: 'height: 100vh; display: flex; flex-direction: column;' }, button( { onclick: () => nodes.val = [ ...nodes.val, { color: '#e4e4e4', text: 'new' } ] }, 'ADD' ), () => nodes.val.map(n => ChildNode({id: n.id, color: n.color, text: n.text})) ) } van.add(document.body, Parent())

[sirenkovladd]

I think you need

() => div(nodes.val.map(n => ChildNode({id: n.id, color: n.color, text: n.text}))

also have a look at vanX.list https://vanjs.org/x#reactive-list, it might help prevent rendering

[denartha10]

I will try this thank you

[denartha10]

@sirenkovladd Thank you for that suggestion that worked for me. I am annoyed I spent so much time on it haha