FAQ Accordion - React JS

What are you most proud of, and what would you do differently next time?

I’m most proud of building the same accordion in React after first implementing it with vanilla JavaScript. Comparing the two implementations helped me understand the difference between imperative DOM manipulation and React’s declarative, state-driven approach.

I’m particularly happy with using a single piece of state to track the currently open accordion item and deriving the answer visibility, icon, and aria-expanded value from that state.

I also intentionally kept the implementation in the main App component rather than introducing an AccordionItem component unnecessarily. For a small component like this, I felt the additional abstraction would add complexity without providing a meaningful benefit.

Next time, I would spend more time experimenting with different component structures and state models to better understand when extracting components becomes useful as an application grows.

What challenges did you encounter, and how did you overcome them?

The main challenge was translating the interaction I had already implemented with vanilla JavaScript into React's state-driven approach.

Instead of directly finding and modifying DOM elements, I needed to decide what information actually needed to be stored as state. I used the ID of the currently open FAQ item as the source of truth and derived the rest of the UI from it.

Another useful challenge was rendering the FAQ items from an array using .map() while ensuring each item had a stable key and its own associated IDs for accessibility.

Working through these decisions helped me understand that React does not require me to manually manage every DOM update. I can update the state and allow React to determine how the UI should change.

What specific areas of your project would you like help with?

I would appreciate feedback on:

Whether my React state design is appropriate for this component Whether storing only the open accordion ID is a good approach My use of .map() and React key values Accessibility and the way aria-expanded and aria-controls are derived from state Whether keeping the implementation in a single App component is appropriate at this scale Whether the CSS transition approach works well with the React state changes Whether there are opportunities to simplify or improve the React implementation without introducing unnecessary abstraction