Not openning accordion after setState in onChange

[allcho]

I try to setState in onChange. After any click uuid changes to new and not openning accordion, Why?

I need this state for making RTK query when I openning accordion

import { v4 as uuidv4 } from 'uuid';
import { FiChevronDown } from 'react-icons/fi';
import {
  Accordion,
  AccordionItem, 
  AccordionItemButton, 
  AccordionItemHeading, 
  AccordionItemPanel
} from 'react-accessible-accordion';
import classes from './AccordionWrapper.module.scss';
import { Dispatch, SetStateAction, useCallback } from 'react';

type PropTypes = {
  items: any,
  setUuid:  Dispatch<SetStateAction<string>>
}

export const AccordionWrapper = ({items, setUuid}: PropTypes) => {

  const openAc = (v:any)=>{
    setUuid(v)
  }

  return(
    <Accordion 
    className={classes.accordion}
    onChange = {(e) => {
      openAc(e[0]);
    }}
    >
        {items.map((item: any, index: any) => {
          const uuid = uuidv4();
            return (
              <AccordionItem
                  className={classes.item}
                  uuid={uuid}
                  key={index}
              >
              <AccordionItemHeading>
                  <AccordionItemButton>
                    <h2>{item.title}</h2>
                    <FiChevronDown />
                  </AccordionItemButton>
              </AccordionItemHeading>
              <AccordionItemPanel>{item.component}</AccordionItemPanel>
              </AccordionItem>
            )
        })}
    </Accordion>
  )
}

[sarah-j-lancaster]

Hey, here is a working code sandbox I made with your component, the uuid of the open accordion is being passed to the parent and printing to the console, The opening and closing of the accordion is handled by the package, if you need the "expanded boolean" for your chevron icon you can use the AccordionItemState wrapper (i've included this in the example). If you need to control the accordion manually then the prop you need to pass is dangerouslySetExpanded into the item.

[sarah-j-lancaster]

[allcho]

Hey, here is a working code sandbox I made with your component, the uuid of the open accordion is being passed to the parent and printing to the console, The opening and closing of the accordion is handled by the package, if you need the "expanded boolean" for your chevron icon you can use the AccordionItemState wrapper (i've included this in the example). If you need to control the accordion manually then the prop you need to pass is dangerouslySetExpanded into the item.

Thanks to example, just now I full understand, how its working and my problems was from useState, because every click useState render all components and changes uuid