[React] material-ui Accordion에 map함수 적용하기

Accordion

참고 : 

https://mui.com/material-ui/react-accordion/

 

 

 

Accordion에 map함수 적용하기

 

src/pages/SalesRegistrationPage.js

  const [member, setMember] = useState([]);
  console.log("test", member);

  useEffect(() => {
    fetch("/member/select")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setMember(data);
      });
  }, []);

DB에서 불러온 Member 테이블 log 출력

 

 

src/pages/SalesRegistrationPage.js return()

	<div>
          {member.map((v, idx) => (
            <Accordion
              key={v.id}
              expanded={expanded === `panel_${idx}`}
              onChange={handleChange(`panel_${idx}`)}
            >
              <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1a-content"
                id="panel1a-header"
              >
                <div>id:{v.id}</div>
              </AccordionSummary>
              <AccordionDetails>
                <div>
                  name : {v.name}, password : {v.password}
                </div>
                <br />
              </AccordionDetails>
              <TextField
                id="outlined-number"
                label="Number"
                type="number"
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">조각</InputAdornment>
                  ),
                }}
              />
              <Divider />
              <AccordionActions>
                <Button size="small" onClick={() => alert("cancel")}>
                  취소
                </Button>
                <Button
                  size="small"
                  color="primary"
                  onClick={(event) => registerClick(event, idx)}
                >
                  판매등록
                </Button>
              </AccordionActions>
            </Accordion>
          ))}
        </div>

 

실행 결과

 

 

참고 :

https://stackoverflow.com/questions/64498396/accordion-open-first-tab-from-a-mapped-array-react-ts