to do list 만들기_6 (체크 하기/풀기, 아이템 제거하기)

체크 하기/풀기

src/App.js

import React, { Component } from 'react';
import ToDoListTemplate from './components/ToDoListTemplate';
import Form from './components/Form';
import ToDoItemList from './components/ToDoItemList';


class App extends Component {

  (...)

  handleToggle = (id) => {
    const { todos } = this.state;

    // 파라미터로 받은 id 를 가지고 몇번째 아이템인지 찾습니다.
    const index = todos.findIndex(todo => todo.id === id);
    const selected = todos[index]; // 선택한 객체

    const nextTodos = [...todos]; // 배열을 복사

    // 기존의 값들을 복사하고, checked 값을 덮어쓰기
    nextTodos[index] = { 
      ...selected, 
      checked: !selected.checked
    };

    this.setState({
      todos: nextTodos
    });
  }

  render() {
    const { input, todos } = this.state;
    const {
      handleChange,
      handleCreate,
      handleKeyPress,
      handleToggle
    } = this;


----------


    return (
      <ToDoListTemplate form={(
        <Form 
          value={input}
          onKeyPress={handleKeyPress}
          onChange={handleChange}
          onCreate={handleCreate}
        />
      )}>
        <ToDoItemList todos={todos} onToggle={handleToggle}/>
      </ToDoListTemplate>
    );
  }
}

export default App;

 

 

아이템 제거하기

src/App.js

import React, { Component } from 'react';
import ToDoListTemplate from './components/ToDoListTemplate';
import Form from './components/Form';
import ToDoItemList from './components/ToDoItemList';


class App extends Component {
  (...)

  handleRemove = (id) => {
    const { todos } = this.state;
    this.setState({
      todos: todos.filter(todo => todo.id !== id)
    });
  }

  render() {
    const { input, todos } = this.state;
    const {
      handleChange,
      handleCreate,
      handleKeyPress,
      handleToggle,
      handleRemove
    } = this;

    return (
      <ToDoListTemplate form={(
        <Form 
          value={input}
          onKeyPress={handleKeyPress}
          onChange={handleChange}
          onCreate={handleCreate}
        />
      )}>
        <ToDoItemList todos={todos} onToggle={handleToggle} onRemove={handleRemove}/>
      </ToDoListTemplate>
    );
  }
}

export default App;