第3週目:反応の作成-入門-todo(クラス)

app.js

import React, { Component } from 'react';
import Todolist from './Todolist';

class App extends Component {
  constructor(props) {
    super(props);
    
    this.state={
      contents:[ ], todo:''
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleClickDelete = this.handleClickDelete.bind(this);
    this.handleClickRed = this.handleClickRed.bind(this);
  }
  
  handleChange(e){           
      this.setState({
        todo:e.target.value              
      })
    }
  
    handleClickDelete(id){
      this.setState({
        contents: this.state.contents.filter(
          content => content.id !== id
        )
      })
    }

    handleClickRed(id){

      this.setState({
        contents: this.state.contents.map(
          content => {if(content.id === id){
            return {...content, heart: !content.heart}
          }
          return content;
        
              }    )
      })
    }
   
  render() {
    return (
      <div>
        <h1>todo</h1>
        <Todolist contents={this.state.contents}
        onClickDelete={this.handleClickDelete}
        onClickRed={this.handleClickRed}
        />
        <form
        onSubmit={(e)=>{
          e.preventDefault()
          const newTodo = {
            id:Date.now(),
            text:this.state.todo,
            heart:false
          }
          
          this.setState({
            ...this.state,
            contents:[...this.state.contents,newTodo],
            todo:''
          })
        }}>

        
        <input
        value={this.state.todo}
        onChange={this.handleChange} />
        <button>추가하기</button>
        </form>
      </div>
    );
  }
}

export default App;

Todolist.js

import React, { Component } from 'react';

class Todolist extends Component {
    render() {

        return (
            <div>
                <ul>
                    {this.props.contents.map((content) => {
                        const { id, text, heart} =content
                        return (
                        
                            <li key={content.id}>
                                {content.text}
                                <button 
                                type="button"

                                style={{background:content.heart?'red':'pink'}}
                                onClick={() => this.props.onClickRed(content.id)}
                                >0</button>
                                <button 
                                type='button'
                                onClick={()=>this.props.onClickDelete(content.id)}
                                >
                                    삭제
                                </button> 
                            </li>
                            
                        

                    )}
                    )}
                </ul>
            </div>
        );
    }
}

export default Todolist;

//콘솔로그(0)
//함수분리(0)
//스프레드문법(0)
//todolist(0)
// 키값-삭제- 필터