What I am going wrong?

[the-man-with-a-golden-mind]

One of my components can not be async so it has to get the data in a traditional way.
It is based on the examples from vanjs page.

import van from "vanjs-core"
const { a, div, li, p, ul, img, span } = van.tags

export const Post = (postId) => {
    const posts = van.state()
    fetch(`http://localhost:5173/post/${postId}`)
        .then(result => result.json())
        .then(resultJson => posts.val = resultJson)
        .catch(e=> posts.val= [])

    return div({class: "flex text-3xl"},
        posts.val ? posts.val.map(p => span("AAA")) : span("LOADING"))
}

posts.val is never changing its value. Why?

[Tao-VanJS]

For state-derived UI elements, you need to wrap them into a binding function that returns the UI element. If a list of elements need to be rendered (in your example, posts.val.map(...)), they can be wrapped by a pass-through container (<span> for inline elements and <div> for block elements).

Thus in your example, the return statement can be changed to:

    return div({class: "flex text-3xl"},
        () => div(posts.val ? posts.val.map(p => span("AAA")) : span("LOADING")))

Hope it helps :-)

[richcorbs]

I think my question might be related. I want the content.Title in the nav to update when the Title input in the editor is changed. I think I've done what makes sense but I'm obviously missing something. Any ideas?

    let contents = van.state(await getContents())

    return div({ class: 'mx-auto container text-gray-500 font-sans' },
      // PAGE CONTENT
      div({ class: 'flex gap-8 pt-4' },
        // SIDENAV
        () => nav({ class: 'flex-grow-0 flex-shrink-0 w-96 h-screen' },
          contents.val.map((content, index) => div(
            { class: 'cursor-pointer', onclick: () => currentContentIndex.val = index },
              div({ class: 'px-4 pt-2 pb-3 cursor-pointer' },
                div(
                  { class: () => `${content.Live === true ? 'text-green-500' : 'text-black'} tracking-wider font-extrabold px-1 py-0.5` },
                  () => content.Title
                )
              )
            )
          )
        ),
        // EDITOR
        main({ class: 'pt-2 flex flex-col flex-grow h-screen' },
          section({ class: 'flex w-full space-x-4' },
            div({ class: 'flex-grow' },
              label({ class: labelClass }, 'Title'),
              input({
                class: 'w-full px-2 py-1 border rounded-sm text-xl', type: 'text',
                value: () => contents.val[currentContentIndex.val]?.Title,
                oninput: e => contents.val[currentContentIndex.val].Title = e.target.value
              })
            )
          )
        )
      )
    )

[Tao-VanJS]

Hi @richcorbs,

In VanJS, you can set state by setting the val property of the State object. But mutating the underlying value of a state won't trigger the reactive UI updates. You can refer to https://vanjs.org/tutorial#state-val-is-immutable for more information.

[richcorbs]

Thank you. That paragraph was unclear to me. "I can set state but state is immutable." I don't understand how both are true.

Is the only VanJS way to do what I'm trying to do by using vanX.reactive and vanX.list?

[Tao-VanJS]

Hi @richcorbs,

Let me explain with an example. Assume if we have a state like that:

const s = van.state({a: 1})

Setting the val property of s is allowed:

s.val = {a: 2}

However, mutating the underlying object of the val property won't trigger the reactive UI update:

// Not allowed
s.val.a = 2

Is the only VanJS way to do what I'm trying to do by using vanX.reactive and vanX.list?

Yes. vanX.reactive can achieve what you need.

Hope it helps :-)

[richcorbs]

Thank you very much. That explanation makes sense.