react typescript : todo list 수정하기

routine이 todo랑 비슷한 결,, 

🐶 원하는것

routine list에서 edit 버튼을 누른다
-> 모달팝업이 뜬다.
-> 내용을 수정한다.
-> 수정된 내용으로 상태가 업데이트 된다.

우선, edit 버튼을 만들어주었다.

 

 

그 다음에는 handleClickOpenEditModal(id) 을 눌렀을 때 모달이 열린다.

routine리스트인 routines에서 id가 같은 routine을 찾는다.

const routine = routines.find((it) => it.id === id);

모달 열때 사용했었던 요 옆에 코드를 활용해서 모달을 열어준다.

 

 

 

 

내용 수정해주고~

 

이제 수정된 내용으로 상태가 업데이트 되어야하기 때문에

기존에 add 버튼에서 사용중인 handleSubmit에다가 코드를 좀 추가해준다.

const handleSubmit: React.FormEventHandler<HTMLFormElement> = (event) => {
    event.preventDefault();
    if (!title || !time) {
      return;
    }

    if (id !== 0) {
      onEditRoutine({
        id,
        title,
        startTime: time,
        time: duration
      });
      return;
    }

    const objRoutine = {
      id: 1,
      title,
      startTime: time,
      time: duration
    };
    onAddRoutine(objRoutine)
    setTitle('');
  }

 

Props 타입에도 onEditRoutine을 추가해준다.

이렇게 수정을 다 하고 루틴 아이디가 같으면 덮어씌우고 같지 않다면 원래 루틴을 루틴리스트에 넣어주었다.