Accordion | Notion

Step 1: Divide the accordion logic into two parts: Header and body.

The header displays the heading of the accordion.
The body displays the content.

Step 2: Create a state variable in the main accordion component and render the accordion body content based on the state variable.

Step 3: Bind the function to the Onchange event to update the state variable.

function  Accordion(){
	const [accordionToggler, accordionToggler] = useState(false)
	
	function AccordionToggler{
		accordionToggler(preState=>!preState)
	}
	
	return (
		<Accordion header part onchange={AccordionToggler}>
		{ToggleAccordion=== true && <body part of the accordion>}
	)
}

Add on Feature to accordion: display only one accordion and collapse all other accordions if the user selects the accordion.

The problem with the above implementation is that every component maintains its own state.

list.map((item, index)=>(
	<Accordion data={item} showlist={index === 0 ? true : false} />
))

It shows the first Accordion item only, and the remaining items are collapsed.
This component is called a controlled component because the parent component is controlled the child component called Accordion.

Edge case :

const [showIndex, setShowIndex]=useState(0)
list.map((item, index)=>(
	<Accordion
		data={item}
		showlist={index === setIndex? true : false}
		SetShowIndex ={()=>setShowindex(index)}
	/>
))

In the Accordion component, extract the props like data, showlist, and the SetShowIndex function and call the SetShowIndex function inside the onChange event.