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