#flush element - do I have to using useClientEffect$?

5 messages · Page 1 of 1 (latest)

uneven drum
# 
import { getXataClient } from '~/xata';

interface locations {
    location: string,
}

export default component$((my: locations) => {

  const store = useStore({
    title: '',
    todo: '',
  });

  useTask$(async () => {

    const xata = getXataClient();
    const records = await xata.db.todos.filter("address", my.location).getFirst()

    store.title = records!['title'] ?? ''
    store.todo = records!['todo'] ?? ''
   
  })

  useClientEffect$(() => {
     const todo = document.getElementById('todo')!.textContent
     const newStyle = '<div class="text-base text-slate-800">' + todo + '</div>'
     document.getElementById('todo')!.innerHTML = newStyle as string
  });

  return (
    <>
      <div>
      <div>

        <p class="text-2xl mb-10">{store.title}</p>

        <div class="container">

          <p class=""></p>
          <p id="todo" class="text-black">{store.todo}</p>

        </div>

      </div>
    </div>
    
    </>
  );
});```
nocturne holly
#

Why do you need to update the style immediately when the component gets mounted in the client? Why not just use the new style and remove the useClientEffect$ code ?

#

I don't understand exactly what do you want to do! Can you explain ?

uneven drum
#

Yes, i did fetch from xata.io, contain string, I do useClientEffect to manipulate (convert) string-html to html object.

So, if I had string like <b>Helo</b>. It can show up (render) as normal html element.

#

I try remove the usecClientEffect$ and force to render useStore$ like this

<store.todo>

it work, rendered as html, but mess up. (qwik things also get rendered) and double the paragrapth.