Control structures

Display multiple data

Following a JSX syntax, let's display a list of TODO items in a template. First, we can use a static list of items. This list will be handled by a specific Signal method : useStore.

// src/components/todos/todos.tsx
export const Todos = component$(() => {
    const todos = useStore([
        { title: 'Learn Qwik', isDone: true },
        { title: 'Build a Qwik app', isDone: false },
        { title: 'Deploy the app', isDone: false },
    ]);
    return (
        <div>
            <h1>TODO List</h1>
            <ul>
                {todos.map((todo, index) => (
                    <li key={index}>
                        <strong>{todo.title}</strong> : {JSON.stringify(todo.isDone)}
                    </li>
                ))}
            </ul>
        </div>
    );
});

Inject data in a child component

Now, let's create a child component to display a single TODO item. We will inject the data from the parent component to the child component. This is done with the props attribute that should be typed within the child component.

// src/components/todo-item/todo-item.tsx
interface TodoItemProps {
    title: string;
    isDone: boolean;
}

export const TodoItem = component$<{ todo: TodoItemProps }>((props) => {
    return (
        <li>
            <strong>{props.todo.title}</strong> : {JSON.stringify(props.todo.isDone)}
        </li>
    );
});

Then, we can use the Todo component in the Todos component.

// src/components/todos/todos.tsx
export const Todos = component$(() => {
    const todos = useStore([
        { title: 'Learn Qwik', isDone: true },
        { title: 'Build a Qwik app', isDone: false },
        { title: 'Deploy the app', isDone: false },
    ]);
    return (
        <div>
            <h1>TODO List</h1>
            <ul>
                {todos.map((todo, index) => (
                    <TodoItem key={index} todo={todo} />
                ))}
            </ul>
        </div>
    );
});

Conditional rendering

We have a boolean variable in the component, now we can use it to conditionally render some elements.

// src/components/todo-item/todo-item.tsx
export const TodoItem = component$<{todo: TodoItemProps}>((props) => {
    return (
            <span>
                <strong>{props.todo.title}</strong> : {props.todo.isDone ? 'Done' : 'Not Done'}
            </span>
    );
});