React FAQ section components

Phrase questions the way people type them, not the way your team talks about the product. "Do you have a free plan?" beats "Plan availability", because it matches the query and it reads like a person asked it. Keep answers to two or three sentences and lead with the direct answer before any qualification. If an answer needs four paragraphs, it is documentation, and the FAQ entry should be a one-line answer plus a link.

Choose between the accordion and the grid based on how many questions you have. An accordion is right past six entries, where showing everything expanded would push the rest of the page far down the screen. The three-column grid is better for four or five short answers, because collapsed panels hide content behind an interaction that many visitors never perform. People scan; they do not click hoping something useful is inside.

Accordions have no crawling penalty as long as the answer text is in the DOM and hidden with CSS. Search engines render the page and index collapsed content, and that is how all four blocks here work. What does hurt is mounting the answer only after a click, which is easy to do accidentally with conditional rendering. If you also emit FAQPage structured data, note that Google now shows those rich results for a narrow set of sites only, so treat the markup as an aid to answer engines rather than a guaranteed listing.

Accessibility is where most hand-rolled accordions fail. The clickable heading should be a real button inside a heading element, carry aria-expanded reflecting its state, and point at the panel with aria-controls. Animate max-height or use a grid-template-rows transition rather than toggling display none, which kills the animation. And decide deliberately whether opening one item closes the others. Single-open keeps the section short, multi-open lets someone compare two answers side by side.