how to update dom when changes to useSignal value in qwik?

Question

The "console.log" outputs the updated values to console, which suggest that the changes actually have taken place... However the "li" list items are not showing up in the browser!?

Can you please help me to understand whats wrong?

Here is the component code:

export default component$(() => {
  const {
    content,
  } = newsData;

  const articleContent = useSignal<HTMLElement>();
  const sectionMenu = useSignal<{ id: string; title: string; level: string }[]>([]);

  const extractSegments = $(
    (content: HTMLElement) => {

      return [
        {
          "id": "functions-preview1",
          "title": "Functions Preview 1",
          "level": "l2"
        },
        {
          "id": "functions-preview2",
          "title": "Functions Preview 2",
          "level": "l2"
        }
      ];
    }
  );

  useVisibleTask$(async () => {
    const sec = await extractSegments(articleContent.value as HTMLElement);
    sectionMenu.value.push(...sec)
    console.log('sectionMenu.value: ', sectionMenu.value);
  });


  return (
    <div class="container">
      <article class="grid mb-15" ref={articleContent}>
        {content}
      </article>
      <ul>
        {sectionMenu.value.map(({ id, title, level }: any) => (
          <li key={id} class={level}>
            <a href={#${id}}>
              {title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
});

Answer 1

This code would solve your problem.

sectionMenu.value = [...sectionMenu.value, ...sec];

You need to change the array reference to trigger the UI update.

Answer 2

I recommend changing the

selectoneMenu.value.push(...sec)

to

selectoneMenu.value = [...sectionMenu.value, ...sec]