How to map items dynamically?

[nxtkofi]

Have you read through the documentation?

• [x] Astal docs
• [x] Library references
• [x] FAQ

Describe what have you tried so far I tried documentation approach with Variable([])

Describe your question How to make items render dynamically? I have a small code that reads something from a file and returns an array of tasks for certain day. I am able to console.log the array properly, but I can't seem to make it map?

Here is the code:

function Calendar() {
const todos = Variable<string[]>([])

[...]<irrelevant code that parses text from file>[...]

async function reRenderTodoList() {
    if (date && date.length === 3) {
      const parsedTodos = await parseTodoFromDailyNote(
        date[0],
        date[1],
        date[2],
      );
      console.log(parsedTodos);
      todos(parsedTodos);
      console.log(todos);
    }
  }

return (
    <window name="calendar" visible={false} application={App} anchor={anchor}>
      <box className="calendar" vertical>
        <box valign={Gtk.Align.START}>{Calendar}</box>
        <Todo />
        <button
          className="daily-note-btn"
          onClicked={() => {
            if (date != undefined) {
              openDailyNote(date[0], date[1], date[2]);
            }
          }}
        >
          Click me!
        </button>
        <box>
          {todos((todosList) =>
            todosList.map((todo) => (
              <label label={todo} />
            )),
          )}
        </box>
      </box>
    </window>
  )
}

reRenderTodoList is a function that's supposed to rerender todos Variable on each day change. console.log(parsedTodos) shows a proper array of todos on each single day change. example output of that console.log:

astal-Message: 21:54:26.571: Array [
    "🟨  To-do",
    "🟨  To-do1",
    "🟨  To-do2",
]

However the console.log(todos) is not properly updated and it always displays:

astal-Message: 22:04:36.003: Variable<>

Am I making something wrong here ?

[Aylur]

in the reRenderTodoList I think you meant to do todos.set(parsedTodos) and not todos(parsedTodos)

[nxtkofi]

Yes, it was exactly that, looks like I missed it in the docs. Thanks for helping !