import { For, type Component } from "solid-js";
import { createStore } from "solid-js/store";
type Tag = {
id: number;
name: string;
};
const App: Component = () => {
const [allTags] = createStore<Array<Tag>>([
{ id: 0, name: "foo" },
{ id: 1, name: "bar" },
{ id: 2, name: "baz" },
]);
const [appliedTags, setAppliedTags] = createStore<Array<Tag>>([
{ id: 1, name: "bar" },
]);
return (
<>
<ul>
<For each={allTags}>
{(t) =>
appliedTags.some((v) => v.id === t.id) ? (
<li style={"font-weight: bold;"}>{t.name}</li>
) : (
<li>{t.name}</li>
)
}
</For>
</ul>
<button
onClick={() => {
setAppliedTags((cur) => [...cur, { id: 0, name: "foo" }]);
}}
>
Add "foo" tag
</button>
</>
);
};
import { For, type Component } from "solid-js";
import { createStore } from "solid-js/store";
type Tag = {
id: number;
name: string;
};
const App: Component = () => {
const [allTags] = createStore<Array<Tag>>([
{ id: 0, name: "foo" },
{ id: 1, name: "bar" },
{ id: 2, name: "baz" },
]);
const [appliedTags, setAppliedTags] = createStore<Array<Tag>>([
{ id: 1, name: "bar" },
]);
return (
<>
<ul>
<For each={allTags}>
{(t) =>
appliedTags.some((v) => v.id === t.id) ? (
<li style={"font-weight: bold;"}>{t.name}</li>
) : (
<li>{t.name}</li>
)
}
</For>
</ul>
<button
onClick={() => {
setAppliedTags((cur) => [...cur, { id: 0, name: "foo" }]);
}}
>
Add "foo" tag
</button>
</>
);
};