How to Close Other Items in a React.js Accordion Menu Effectively

Learn how to manage the visibility of items in a React.js accordion menu where only one item opens at a time. Follow our step-by-step guide to implement this feature in your application!
---
This video is based on the question https://stackoverflow.com/q/69908427/ asked by the user 'user1833620' ( https://stackoverflow.com/u/1833620/ ) and on the answer https://stackoverflow.com/a/69908469/ provided by the user 'Matthew Kwong' ( https://stackoverflow.com/u/10579013/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: In Reactjs, Close other items when one item is opened

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Close Other Items in a React.js Accordion Menu Effectively

If you're a beginner in React.js, you might be experimenting with functional components and state management. One common feature that you may want to implement is an accordion menu – where users can click to reveal content under items, and if one item is open, others should automatically close. This functionality enhances user experience by decluttering the interface. In this post, we'll discuss how to achieve this behavior step by step.

The Problem: Accordion Menu Behavior

The objective is simple: when a user clicks on an accordion item to reveal its content, any other open items should close. This necessitates managing the state of which item is currently displayed.

Here’s what we currently have in our code:

[[See Video to Reveal this Text or Code Snippet]]

In this implementation, clicking on an item opens its content, but there’s no logic to close other items when one is opened.

The Solution: Managing State Across Items

To solve this issue, we can create a single piece of state in the parent component that keeps track of which item is currently open. The critical decision here is to pass this state and a method to update it down to each ListItem.

Step-by-Step Implementation

Update the ListItem Component
Modify the ListItem component to accept id, show, and onShow props:

[[See Video to Reveal this Text or Code Snippet]]

Create State in the Parent Component
In the parent component, manage the state to keep track of which item's content should be visible:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

State Management:

We created a piece of state called showId in Menu2 to track which accordion item is currently open.

handleShow is a function that sets showId to the id of the clicked item.

Passing Props:

Each ListItem receives its unique id, the boolean show which checks if it matches showId, and the onShow function for handling clicks.

Conditional Rendering:

Each item will only display its content based on whether its id matches the showId.

Conclusion

And that's it! With this implementation, you now have a functioning accordion menu where only one item can be opened at a time. This not only improves user experience but also keeps your UI clean and organized.

Remember to keep practicing and experimenting with different components and states in React! Happy coding!

Видео How to Close Other Items in a React.js Accordion Menu Effectively канала vlogize