Sharing state between parent and child component?

[Ashvith10]

Is it possible to do this in VanJS? Because so far, my efforts in this have failed. Sure, it is able to pass state with the exact initial value, but the reactive behaviour breaks down.

[bleistivt]

Lifting up shared state to the parent component works just like in other frameworks:

const {button, div} = van.tags

const Child = ({count}) => div(
  count,
  " ",
  button({onclick: () => count.val++}, "increment")
)

const Parent = () => {
  const count = van.state(0)
  return div(Child({count}), Child({count}))
}

van.add(document.body, Parent())

https://jsfiddle.net/j0wanotL/

Or do you want to do something else?

[Ashvith10]

@bleistivt Is it not possible to use a function to the child object, to update the state? The function that was inside the parent component, which was passed to the child should have the logic - this is because I want to make the child flexible to other parent components, and passing a function would make it modular.

Something like:

const Parent = () => {
    const doSomething = (index, position) => {
      output.val++
    }
    
    return Child({ onFinish: doSomething })
}

[bleistivt]

Like this?

const {button,div} = van.tags

const Child = ({onclick, text}) => button({onclick}, text)

const Parent = () => {
  const count = van.state(0)
  const onclick = () => count.val++
  return div(count, " ", Child({onclick, text: "increment"}))
}

van.add(document.body, Parent())

https://jsfiddle.net/gw6azf40/

Maybe I have misunderstood what you are trying to do. Do you have an example where the reactivity breaks down?

[Ashvith10]

@bleistivt my bad - since I tried juggling between van.state() and vanX.reactive(), that made the process really confusing. When I tried appending the state object to div element as string (via JSON.stringify()), it wasn't behaving properly, because it was supposed to be initialized as a derived state.