const deleteTask = (id) => {
        setTasks(tasks.filter(task => task.id !== id))
    }
    return (
        <div>
            <form className="main-form" onSubmit={submitTask}>
                <label htmlFor="taskInput">Enter Task</label>
                <input
                    onChange={updateTasks}
                    value={newTask.text}
                    type="text"
                    id="taskInput"
                />
                <button type="submit">Submit</button>
            </form>
            <Overview tasks={ tasks } onDelete={deleteTask} />
        </div>
    );
}


const Overview = ({ tasks, onDelete }) => {
    return (
        <ul className="each-task">
            {tasks.map((task) => (
                <li key={task.id}>{task.text}
                    <button onClick={() => onDelete(task.id)}>Delete</button>
                </li>
            ))}
        </ul>
    )
}