Skip to main content
Solid.js v2

createProjection

createProjection allows creating a store that updates reactively instead of programmatically.

Usage

import { createSignal, For } from 'solid-js';
import { createProjection } from 'solid-js/store';
function TodoApp(props: { todos: Todo[] }) {
const [selectedTodo, setSelectedTodo] = createSignal(null);
const todoSelection = createProjection(state => {
state[state._active] = false;
if (selectedTodo()) {
state[selectedTodo()] = true;
state._active = selectedTodo();
}
});
return (
<div>
<For each={props.todos}>
{(todo) => (
<div
class={todoSelection[todo.id] ? 'active' : ''}
onClick={() => setSelectedTodo(todo.id)}
>{todo.text}</div>
)}
</For>
<button onClick={() => setSelectedTodo(null)}>Clear</button>
</div>
);
}

Last updated: 4/21/25, 10:01 AM

Edit this page on GitHub
Solid.js v2Rough WIP docs for Solid 2.0.