[ React ] TodoList 만들기

import React, {Component} from "react";

export default class App extends Component {
  state = {
    todoData : [
      {
        id : "1",
        title : "공부하기",
        completed : true
      },
      {
        id : "2",
        title : "책 읽기",
        completed : false
      },
      {
        id : "1",
        title : "과제하기",
        completed : false
      }
    ],
    value : ""
  };

  btnStyle = {
    color : "#fff",
    border : "none",
    padding : "5px 9px",
    borderRadius : "50%",
    cursor : "pointer",
    float : "right"
  }
  
  getStyle = () => {
    return {
      padding : "10px",
      borderBottom : "1px #ccc dotted",
      textDecoration : "none",
    };
  };

  handleClick = (id) => {
    let newTodoData = this.state.todoData.filter((data) => data.id !== id);
    this.setState({todoData : newTodoData})
  }

  handleChange = (e) => {
    this.setState({value : e.target.value});
  };

  handleSubmit = (e) => {
    e.preventDefault();

    let newTodo = {
      id : Date.now(),
      title : this.state.value,
      complete : false
    };

    this.setState({todoData : [...this.state.todoData, newTodo]});
  }

  render() {
    return (
      <div className = "container">
        <div className = "todoBook">
          <div className = "title">
            <h1>할일 목록</h1>
          </div>

          {this.state.todoData.map((data) => (
            <div style = {this.getStyle()} key = {data.id}>
            <p>
              <input type="checkbox" defaultChecked={data.completed}/>
                {data.title}
              <button style={this.btnStyle} onClick = {() => this.handleClick(data.id)}>x</button>
            </p>
            </div>
          ))}

          <form style = {{display : "flex"}} onSubmit = {this.handleSubmit}>
            <input
              type = "text"
              name = "value"
              style = {{flex : "10", padding : "5px"}}
              placeholder = "해야 할일을 입력하세요."
              value = {this.state.value}
              onChange = {this.handleChange}
            />
            <input
              type = "submit"
              value = "입력"
              className = "btn"
              style = {{flex : "1"}}
            />
          </form>
        </div>
      </div>
    )
  }
}