[음악 관리 프로그램] 음악 수정 form 변경

원래 구현하려고 했던 것은 밑의 사진에서 '재평가'를 클릭하면 모달이 나오고 거기서 수정을 할 수 있는 것이었는 데,

모달안에서 해당 데이터의 id가 식별이 되지 않았고 데이터를 수정할 수 없었다. 그래서 아래 사진과 같이 모달이 열렸는지 확인 하는 flag가 true가 되면 그냥 TableCell 내에 바로 보이도록 수정했다.

 

그리고 이 부분에서 구현하려고 했던 것은 위와 같이 해당 음악 데이터의 코멘트를 수정할 때 그 데이터 만의 input form 이 렌더링 되는 것이 었지만, 어느 이유에서인지 모든 열의 input form 이 렌더링 되었다. 

 

데이터가 들어가 있는 musics 를 map함수 (musics.map ( m =>{ ...}))로 각 TableCell에 뿌리는 방식으로 되어있었고, 해당 음악을 클릭했을 때 해당 음악 데이터의 id가 제대로 찍히는 지 확인했다. 클릭했을 때는 제대로 인식이 되었고 그래서, 클릭하는 함수의 parameter에 해당 음악의 id(m.id)를 전달했다. 그리고 클릭하고 난후 삼항연산자를 통해 클릭하는 함수에서 해당 id의 상태를 나타내는 editOpened와 지금 음악 데이터의 id (m.id) 가 일치 할 때 input form을 렌더링 되도록 했다.  

 

/*...*/
const openEditModal = id => {
    setEditOpened(id)
  }
/*...*/
 {musics.map(m => {
              return (
                <Table>
                  <TableRow>
                    /*....*/
                    <TableCell style={styles.tableCellComment}>{m.comment} <Button onClick={() => openEditModal(m.id)}>재평가</Button>
                      {editOpened === m.id ?
                        <div>
                          <TextField name="comment" value={musicdata.comment} onChange={handleInputChange} />
                          <Button onClick={() => updateMusic(m.id, musicdata.comment)}>저장</Button></div> : null
                      }
                    </TableCell>
 /*...*/