react - todo_checkbox_ handleChange

KIMMY·2020년 6월 3일
0

codingEveryday

목록 보기
8/8

체크박스 누르면 체크 사라졌다가 나타났다가 하게하는 부분

*note: status가 true 면 false로, vice versa.
이 부분은 더 나은 방법이 있음

if(status === true){
				return status = !status;
                }
                // true 일 시 false 가, 또 반대로 값이나옴

 handleChange(id) {
        function changeCheckbox(status){
            if (status === true){
                return false;
            }else{ return true}
        } 
        let newTodos = this.state.todos.map(data => { if( data.id === id ){
                                 data.completed=changeCheckbox(data.completed)
                                    return data;
                                }else{
                                    return data;
                                }
                              });
        this.setState(prevState => { return { todos: newTodos }})  
      
    }
    

더 더 더 나은 코드.
(위에 나의것은 prevState를 직접 변경하는지 어떤지 모르겠으나, 밑에 것은 직접 변경하지 않음)

 handleChange(id) {
        this.setState(prevState => {
            const updatedTodos = prevState.todos.map(todo => {
                if (todo.id === id) {
                    return {
                        ...todo,
                        completed: !todo.completed
                    }
                }
                return todo
            })
            console.log(prevState.todos)
            console.log(updatedTodos)
            return {
                todos: updatedTodos
            }
        })
    }
profile
SO HUMAN

0개의 댓글