1 year ago

Heads up: I'm going to use Vue/Alpine lingo in this article, but I think this pattern applies to lots of different tools. If you clicked a different row, the previous one would become "deactivated" and the new one would "activate".

Now, we can add a click listener to set the new active row when a different one is clicked: let activeRow = 12 document.querySelectorAll('tr').forEach((row) => { row.addEventListener('click', () => { activeRow = row.id }) if (row.id === activeRow) { row.classList.add('active')} else { row.classList.remove('active')} })

Now, because when a single row is clicked, only a single reactive boolean is switched, and only a single effect updates (instead of ten thousand). Before, because "activeRow" only ever contained a single value, there was only ever a single row active at a time.