Ejercicio TODO list

[zamarrowski]

import React from 'react'

const List = props => 
    <ul>
        {props.children}
    </ul>

const ListItem = props => 
    <li>
        <InputText onChange={(e) => props.onChange(e, props.task.id)} value={props.task.text} /> 
        <BasicButton onClick={() => props.onDelete(props.task.text)} label="Borrar" />
    </li>

const InputText = props => 
    <input type="text" value={props.value} onChange={props.onChange} />

const Button = props => 
    <button onClick={props.onClick}>{props.label}</button>

const AddTaskButton = props => 
    <Button onClick={props.onClick} label={'Añadir boton'}/>

const BasicButton = props => 
    <button style={{backgroundColor: props.action ? 'green' : 'orange'}} onClick={props.onClick}>{props.label}</button>

export default class ListContainer extends React.Component {
    state = {
        tasks: [{
            id: 1,
            text: 'zamarro'
        }],
        text: '',
    }

    addTask = () => {
        this.setState({ tasks: [...this.state.tasks, this.state.text] })
    }

    deleteTask = (text) => {
        let newTasks = this.state.tasks.filter(el => el !== text)
        this.setState({ tasks: newTasks })
    }

    onChangeTask = (e, id) => {
        let tasks = this.state.tasks.map(element => {
            if (element.id === id) element.text = e.target.value
            return element
        })
        this.setState({ tasks: tasks })
    }

    render() {
        return(
            <>
                <List>
                    {this.state.tasks.map((element) => (
                        <ListItem 
                            onDelete={this.deleteTask}
                            onChange={this.onChangeTask}
                            task={element}
                            key={element}
                        />
                    ))}
                </List>
                <InpuText type="text" onChange={e => this.setState({ text: e.target.value })} />
                <BasicButton onClick={this.addTask} label="Añadir tarea" action="success"  />
            </>
        )
    }
}