if I have an array I want to open accordion Mui by map

Question

enter image description here enter link description here

This code is from MUI and look there please when you open the first accordion then you open the second accordion the first accordion is not closed. now I want to get the same functionality, but it doesn’t work for me when I do it through an array ( map ) then When I open the first accordion and then I want to open the second accordion, then the first accordion automatically closes for me, this is all due to the fact that I control the opening myself and closing by setExpanded. Please tell me how can I fix this so that I can open both the first and second accordions

const [expanded, setExpanded] = useState(null)

  const handleChangeExpanded = (panel: string) => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };


  return (
    <Styled.Root>
        <form onSubmit={handleSaveOperation}>
              {operationsView?.map((operation, index) => {
                console.log('index', index);
                console.log('expanded', expanded);
                return (
                  <Accordion
                    key={operation.expenseId}
                    // expanded={expanded === `panel_${operation.expenseId}`}
                    onChange={handleChangeExpanded(`panel_${operation.expenseId}`)}
                  >
                    <AccordionSummary expandIcon={<SvgArrowFinancial />}>
                      <Grid css={pl(12)} container justifyContent="flex-start" alignItems="center">
                        <Grid item xs={0.3}>
                          <Controller
                            control={control}
                            name={`selections.${index}`}
                            render={({ field: { value, onChange } }) => (
                              <FormControlLabel
                                value={value}
                                onChange={(e, checked) => onChange(checked)}
                                css={labelTextCSS}
                                control={<Checkbox />}
                                label=""
                              />
                            )}
                          />
                        </Grid>
                        <Grid item xs={2.34}>
                          <Typography css={[operationsDataCSS, centerTextCSS]}>{operation.dateOfPayment}</Typography>
                        </Grid>
                        <Grid item xs={2.66}>
                          <Grid container justifyContent="flex-start" alignItems="center">
                            <Grid item xs={7.9}>
                              <Typography
                                css={
                                  expanded === `panel_${operation.expenseId}`
                                    ? [operationsDataCSS, ml(8)]
                                    : [operationsDataBoldCSS, ml(8)]
                                }
                              >
                                {operation.dateOfReceive}
                              </Typography>
                            </Grid>
                            <Grid css={successIconCSS} item xs={4.1}>
                              {operation.excluded ? <SvgWarningIcon /> : <SvgSuccessIcon />}
                            </Grid>
                          </Grid>
                        </Grid>
                        <Grid item xs={3.82}>
                          <Typography
                            css={
                              expanded === `panel_${operation.expenseId}`
                                ? [operationsDataBoldCSS, ml(16)]
                                : [operationsDataCSS, ml(16)]
                            }
                          >
                            {operation.contractor}
                          </Typography>
                        </Grid>
                        <Grid item xs={2.26}>
                          <Typography
                            css={[
                              expanded === `panel_${operation.expenseId}` ? operationsDataBoldCSS : operationsDataCSS,
                              textRightCSS,
                            ]}
                          >
                            {operation.money}
                          </Typography>
                        </Grid>
                      </Grid>
                    </AccordionSummary>
                    <AccordionDetails>
                      <Grid container justifyContent="space-between" flexDirection="column">
                        <Grid item xs={11.35}>
                          <Grid container justifyContent="center" alignItems="start">
                            <Grid item xs={5.7}></Grid>
                            <Grid item xs={3.8}>
                              <Typography css={operationsChildDataCSS}>
                                На сумму {operation.money} в том числе НДС 18%
                              </Typography>
                            </Grid>
                            <Grid item xs={2.14}>
                              <Typography css={[operationsChildDataCSS, textRightCSS]}>По счёту</Typography>
                            </Grid>
                          </Grid>
                        </Grid>
                        <Grid></Grid>
                      </Grid>
                    </AccordionDetails>
                  </Accordion>
                );
              })}
            </Grid>
            <Grid
              css={[pr(24), mt(15)]}
              gap={2}
              container
              justifyContent="flex-end"
              flexDirection="row"
              alignItems="center"
            >
              <Grid>
                <Typography css={textAddingSumCSS}>Дополнительно:</Typography>
              </Grid>
              <Grid>
                <Controller
                  name="sum"
                  control={control}
                  render={({ field: { onChange, value } }) => (
                    <TextField
                      css={addingSumCSS}
                      onChange={onChange}
                      value={value}
                      color="primary"
                      variant="outlined"
                      placeholder="0,00"
                      fullWidth
                      InputProps={{
                        inputComponent: CurrencyInput,
                      }}
                    />
                  )}
                />
              </Grid>
            </Grid>
            <Grid
              css={[pr(52), mt(30)]}
              gap={2}
              container
              justifyContent="flex-end"
              flexDirection="row"
              alignItems="center"
            >
              <Grid>
                <Typography css={totalSumTextCSS}>Итоговая сумма:</Typography>
              </Grid>
              <Grid css={totalSumCSS}>{sumItems}</Grid>
            </Grid>
          </Grid>
        </form>
      </MuiDrawer>
    </Styled.Root>
  );
};

  [1]: https://codesandbox.io/s/td9gs4?file=/demo.tsx

Answer 1

When I open the first accordion and then I want to open the second accordion, then the first accordion automatically closes for me, this is all due to the fact that I control the opening myself and closing by setExpanded.

You already figured out the problem. So just use the simple accordion functionality as in the sandbox that you shared. You can remove expanded and onChange for the <Accordion /> component and you will the same functionality as you expected.

Here is the simple sandbox rendered with your data.