How to use the solid-js/dom.selectWhen function in solid-js
To help you get started, we’ve selected a few solid-js examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
krausest / js-framework-benchmark / frameworks / keyed / solid-signals / src / main.jsx View on Github 
const App = () => {
let rowId;
const [data, setData] = createSignal([]),
[selected, setSelected] = createSignal(null, (a, b) => a === b),
applySelection = selectWhen(selected, 'danger');
return <div class="container">
<div class="jumbotron"><div class="row">
<div class="col-md-6"><h1>SolidJS Keyed</h1></div>
<div class="col-md-6"><div class="row">
<button id="run">
</button><button id="runlots">
</button><button id="add">
</button><button id="update">
</button><button clear="">
</button><button id="swaprows">
</button></div></div>
</div></div>
{ row => (
rowId = row.id,
<table class="table table-hover table-striped test-data"><tbody>
</tbody></table></div>const App = () => {
let rowId;
const [ state, setState ] = createState({ data: [], selected: null }),
run = () => setState({ data: buildData(1000), selected: null }),
runLots = () => setState({ data: buildData(10000), selected: null }),
add = () => setState('data', d => [...d, ...buildData(1000)]),
update = () => setState('data', { by: 10 }, 'label', l => l + ' !!!'),
swapRows = () => setState('data', d => d.length > 998 ? { 1: d[998], 998: d[1] } : d),
clear = () => setState({ data: [], selected: null }),
select = (e, id) => setState('selected', id),
remove = (e, id) => setState('data', d => {
const idx = d.findIndex(d => d.id === id);
return [...d.slice(0, idx), ...d.slice(idx + 1)];
}),
applySelection = selectWhen(() => state.selected, 'danger');
return <div class="container">
<div class="jumbotron"><div class="row">
<div class="col-md-6"><h1>SolidJS Keyed</h1></div>
<div class="col-md-6"><div class="row">
<button id="run">
</button><button id="runlots">
</button><button id="add">
</button><button id="update">
</button><button clear="">
</button><button id="swaprows">
</button></div></div>
</div></div>
{ row => (
rowId = row.id,
<table class="table table-hover table-striped test-data"><tbody>
</tbody></table></div>solid-js
A declarative JavaScript library for building user interfaces.
