One page on our site unmounts its FAQ answers, the other twenty-nine keep them in the DOM, and only one of those choices was deliberate
Open notifio.app/help in a browser, do not click anything, and ask the page what it contains: > [... document . querySelectorAll ( ' button[aria-expanded] ' )]. map ( b => b . getAttribute ( ' aria-expanded ' )) [ " false " , " false " , " false " , " false " , " false " , " false " ] > document . body . innerText . includes ( " Notifio runs in the background " ) false Six questions, six closed,…
One page on the Notifio website unmounts its Frequently Asked Questions (FAQ) answers, while the other twenty-nine retain them in the Document Object Model (DOM). Only this single page was deliberately designed to hide the answers.
When you view the FAQ page, you'll notice that all six answers disappear upon clicking, leaving the text "Notifio runs in the background" as the sole content. In contrast, on the alert page titled "notifio.app/alerts/kamernet," four questions remain visible, and their corresponding answers are present within the document. This difference stems from two distinct methods of implementing the FAQ system: one utilizes React state management, while the other uses a simpler hand-rolled JavaScript function.
The hand-rolled function creates a component named `FaqsItem`, which visually displays a question and its answer. However, the answer is only rendered when the component's state changes to "open." This change in state removes the answer from the DOM, effectively unmounting it. This technique is used across twenty-nine pages, including various alert pages, comparison pages, guides, audience pages, and the home page.
All of these pages employ this method, except for the help page, which uses React state management to manage its FAQ answers.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
