App.jsx
import './App.css';
import React, { useState } from "react";
import Overview from "./components/Overview.jsx";
import uniqid from "uniqid";

const App = () => {
    const [tasks, setTasks] = useState([])
    const [newTask, setNewTask] = useState({
        text: '',
            id: uniqid()
    })

    const updateTasks = (e) => {
        setNewTask({
            text: e.target.value,
            id: uniqid(),
        })
    }

    const submitTask = (e) => {
        e.preventDefault();
        if (newTask.text === '') return;
        setTasks([...tasks, newTask])
        setNewTask({
            text: '',
            id: uniqid()
        })
    }

    const deleteTask = (e) => {
        const id = e.target.getAttribute("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 } />
        </div>
    );
}

Overview.jsx

import React from "react";

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

export default Overview;

export default App;