[TIL] 항해99 3주차

삽질의 기록

3주차 개인과제는 TodoList를 만드는 것인데 default 값으로 생성해둔 list들이 삭제를 누르면 같이 삭제되었다.

  const [todos, setTodos] = useState([
    {
      id: 1,
      title: '리액트 공부',
      body: '이거 왜 안됨?',
      isDone: 'false'
    },
    {
      id: 2,
      title: '리액트 공부',
      body: '이거 왜 안됨?',
      isDone: 'true'
    }
  ]);

      <H1>Working.. 🔥</H1>
      <Wrapper>
        {todos
          .filter((item) => item.isDone !== "false")
          .map((item) => {
            return (
              <Todo key={item.id}>
                <h2>{item.title}</h2>
                <h4>{item.body}</h4>
                <Button onClick={() => deleteBtn(item.id)}>삭제</Button>
                <Button onClick={completeBtn}>완료</Button>
              </Todo>
            );
          })}
      </Wrapper>
      <H1>Done..🎉</H1>
      <Wrapper>
        {todos
          .filter((item) => item.isDone === "true")
          .map((item) => {
            return (
              <Todo key={item.id}>
                <h2>{item.title}</h2>
                <h4>{item.body}</h4>
                <Button onClick={() => deleteBtn(item.id)}>삭제</Button>
                <Button onClick={cancelBtn}>취소</Button>
              </Todo>
            );
          })}
      </Wrapper>

처음에 삭제 버튼에 있는 함수에서 클릭 시 id값을 찍어 보았는데
todos의 id값이 두개가 동일하게 찍히는 걸 보고 해결점을 찾지 못하고 있었는데

todos.filter에 isDone 값에

.filter((item) => item.isDone !== "false") 
.filter((item) => item.isDone === "true") 

여기서 두개가 같은 값을 불러와 사실 todos는 2개가 아니라 1개 였다는 것을 알았다...
내용이라도 바꿧다면 금방 알았겠지만 내용을 같게 적어두니 이런 일이 생긴거 같다.

오늘 완료와 취소 버튼 기능을 완료 하고 내일부터 다른 강의를 다시 들으면서 공부를 제대로 해야겠다.