React-todolist

import React, { Component } from 'react'
import Form from './Form'
import List from './List'
export default class Todolist extends Component {
    state = {
        list: [{ id: '1', taskname: 'aaa' }]
    }
    handleReceviewKeyword = () => {
        return (keyword) => {
            this.state.list.push({ id: new Date().getTime(), taskname: keyword })
            this.setState({})
        }
    }
    handDeleteTask = (id) => {
        return () => {
            let newlist = this.state.list.filter(value => { return value.id != id })
            this.setState({ list: newlist })
        }
    }
    render() {
        return (
            <>
                <Form onReceviewKeyword={this.handleReceviewKeyword()}></Form>
                <List onDeleteTask={this.handDeleteTask} list={this.state.list}></List>
            </>
        )
    }
}

import React, { Component } from 'react'

export default class Form extends Component {
    state = {
        value:''
    }

    handleChange=()=>{
        return(e)=>{
            this.setState({
                value:e.target.value  
            })
        }
    }
    handleKeyup=()=>{
        return(e)=>{
            if(e.keyCode===13){
                this.props.onReceviewKeyword(this.state.value)
                this.setState({value:''})
            }
        }
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.value} onChange={this.handleChange()} onKeyUp={this.handleKeyup()}/>
            </div>
        )
    }
}

import React from 'react'
import PropTypes from 'prop-types'
export default function List(props) {

    return (
        <ul>
            {
                props.list.map(value =><li key={value.id}>{value.taskname}<span onClick={props.onDeleteTask(value.id)}>X</span></li> )
            }
        </ul>
    )
}
List.propTypes = {
list: PropTypes.array
}