I have a webpage with two components: a Left-Hand Side (LHS) and a Right-Hand Side (RHS). The RHS displays a table with rows, and the LHS shows a general card-like view. When I click a row in the RHS, I want the LHS card to update based on the selected row's data, and the clicked row should change its color.
Everything works fine after the LHS component has mounted. However, on the first row click, when the LHS component loads for the first time, the entire page refreshes, and the RHS data resets—causing the row color change to be lost. The same issue occurs when a row is unselected and the LHS component is unmounted.
Answer
Check your click handler Make sure you’re not triggering a page reload. If you’re using a button inside a form, add type="button". If you’re using an tag, add event.preventDefault() in your click handler