kethan / uele

uElement reactive JSX

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot trigger re-rendering

Asim-Tahir opened this issue Β· comments

Firstly thanks for the minimal JSX library πŸ™πŸ».

The Problem:

Second, I got a problem with re-rendering πŸ˜….
There is no re-rendering when reactive variable(signal / observable) is change.

In my example; show loader elements firstly, after make a request to API. When request resolved(failed or success) hiding the loader and show request's response data.

The problem is when reactive variable changes, its not trigger the re-rendering. My logic is constructed over ternary conditional rendering like React.

<>
  {loading ? (
    <>
      <img width={32} height={32} src="assets/loader.svg" alt="Loader" />
      <br />
      <>Loading Todos...</>
    </>
  ) : (
    map(
      todos,
      (todo) => (
        <div key={todo.id} class="todo-item">
          <input
            class="todo-checkbox"
            type="checkbox"
            name="completed"
            value={todo.completed}
          />
          <span class="todo-title">{todo.title}</span>
        </div>
      ),
      <>No Todos Found :(</>
    )
  )}
</>

Package Versions:

"uele": "0.6.3",
"ulive": "0.5.1"

Minimal Reproduction:

There is e minimal reproduction:
https://stackblitz.com/edit/vitejs-vite-qfwv3j?file=src%2FTodos.jsx

@Asim-Tahir Sorry for the late response. You need to use If component to work on conditions.
https://stackblitz.com/edit/vitejs-vite-gddsmx?file=src%2Fmain.jsx,src%2FTodos.jsx