andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update wording

Browse Source
This commit is contained in:
Chalarangelo
2021-10-13 20:40:54 +03:00
parent a1d4f62042
commit b4dd74f868
18 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
snippets/Accordion.md
View File

@ -2,14 +2,14 @@
title: Accordion
tags: components,children,state,advanced
firstSeen: 2019-03-02T10:46:34+02:00
lastUpdated: 2021-01-07T23:57:13+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
---
Renders an accordion menu with multiple collapsible content elements.
- Define an `AccordionItem` component, that renders a `<button>` which is used to update the component and notify its parent via the `handleClick` callback.
- Use the `isCollapsed` prop in `AccordionItem` to determine its appearance and set an appropriate `className`.
- Define an `Accordion` component that uses the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
- Define an `AccordionItem` component, that renders a `<button>`. The button updates the component and notifies its parent via the `handleClick` callback.
- Use the `isCollapsed` prop in `AccordionItem` to determine its appearance and set its `className`.
- Define an `Accordion` component. Use the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
- Filter `children` to remove unnecessary nodes except for `AccordionItem` by identifying the function's name.
- Use `Array.prototype.map()` on the collected nodes to render the individual collapsible elements.
- Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.