Reactjs – Issue opening a looped MUI Controlled Accordions

I think this can be fixed if you remove the first useEffect since you are just trying to set the initial state of the accordions as opened? And arr doesn’t change after that anyways.

Here’s how I would go about it:

1. remove the first useEffect and use arr to set the initial state of expanded:

// don't need this
// React.useEffect(() => {
//        setExpanded(
//          arr.reduce((a, c) => {
//            a[`panel${c}`] = true;
//            return a;
//          }, {} as Record<string, boolean>)
//        );
//      }, []);


const [expanded, setExpanded] = React.useState<Record<string, boolean>>(
   // same reduce function from useEffect above
    arr.reduce((a, c) => {
      a[`panel${c}`] = true;
      return a;
    }, {} as Record<string, boolean>)
  );

2. update Accordion expanded attribute to whatever is in expanded state, which will be guaranteed to have a value by the time it gets here:

<Accordion
            key={i}
            expanded={expanded[`panel${i}`]}
            onChange={handleChange(`panel${i}`)}
          >

And all together:

import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function ControlledAccordions() {
  const arr = [1, 2, 3];

  const [expanded, setExpanded] = React.useState<Record<string, boolean>>(
    arr.reduce((a, c) => {
      a[`panel${c}`] = true;
      return a;
    }, {} as Record<string, boolean>)
  );
  const handleChange =
    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
      setExpanded({
        ...expanded,
        [panel]: isExpanded,
      });
    };

  console.log('expanded', expanded);

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'row',
      }}
    >
      <div>
        {arr.map((i) => (
          <Accordion
            key={i} 
            expanded={expanded[`panel${i}`]} // removed || true here
            onChange={handleChange(`panel${i}`)}
          >
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls="panel1bh-content"
              id={`panel${i}bh-header`}
            >
              <Typography sx={{ width: '33%', flexShrink: 0 }}>
                General settings
              </Typography>
              <Typography sx={{ color: 'text.secondary' }}>
                I am an accordion
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography>
                Nulla facilisi. Phasellus sollicitudin nulla et quam mattis
                feugiat. Aliquam eget maximus est, id dignissim quam.
              </Typography>
            </AccordionDetails>
          </Accordion>
        ))}
      </div>
      <div>
        {arr.map((i) => (
          <Accordion
            key={i}
            expanded={expanded[`panel${i}`]}
            onChange={handleChange(`panel${i}`)}
          >
            <AccordionSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls="panel1bh-content"
              id={`panel${i}bh-header`}
            >
              <Typography sx={{ width: '33%', flexShrink: 0 }}>
                General settings
              </Typography>
              <Typography sx={{ color: 'text.secondary' }}>
                I am an accordion
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography>
                Nulla facilisi. Phasellus sollicitudin nulla et quam mattis
                feugiat. Aliquam eget maximus est, id dignissim quam.
              </Typography>
            </AccordionDetails>
          </Accordion>
        ))}
      </div>
    </div>
  );
}

But you should still consider moving things to a parent component like the react docs says here: https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components