update multiple objects in state with single function

Question

I have 3 different Accordions that a single state controls their open and close state like so:

 const [accordionOpen, setAccordionOpen] = useState({
    countryOfOriginAccordion: true,
    schoolAccordion: false,
    areaOfStudyAccordion: false,
  });

ideally, I am setting each state with their own function like this:

setAccordionOpen((previousState) => ({
                ...previousState,
                schoolAccordion: !accordionOpen.schoolAccordion,
              }))

I want to use a single function that changes this value in state dynamically:

Wani · Accepted Answer · 2022-11-18 14:25:36Z

2

You could do something like this:

const toggleAccordionOpen = (accordionName) => setAccordionOpen((prevState) => ({
  ...prevState,
  [accordionName]: !prevState[accordionName],
}));

// Example of usage
toggleAccordionOpen('countryOfOriginAccordion');

If you are using Typescript you can annotate the accordionName to a type union:

const ACCORDION_NAMES = {
  COUNTRY_OF_ORIGIN: 'countryOfOriginAccordion',
  SCHOOL: 'schoolAccordion',
  AREA_OF_STUDY: 'areaOfStudyAccordion',
} as const;

type AccordionNameGeneric<T> = T[keyof T];
type AccordionName = AccordionNameGeneric<typeof ACCORDION_NAMES>;

const toggleAccordionOpen = (accordionName: AccordionName) => 
...

And then call it like this:

toggleAccordionOpen(ACCORDION_NAMES.COUNTRY_OF_ORIGIN);

answered Nov 18, 2022 at 14:25

Wani

5766 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

update multiple objects in state with single function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related