Untitled

import react,{useState} from "react"
import '../../App.css';
import Card from "./Card"
import taskData from "./Card/taskData"
import Task from "./Card/Task"
function Cards()
{
    const [tasks,setTasks] = useState(taskData)
    function changeData(key,state)
    {
        //Problem ^ Function inits object object {see Logs}

        if(state!=undefined)
            {
                console.log(`Accepted:\nkey=${key}\nstate=${state}`)
                var newData = tasks.map(el => 
                    {
                    if(el.text==key)
                    {
                        return({
                            id:el.id,
                            text:el.text,
                            completed:state
                        })
                    }
                    else
                    {
                        return({
                            id:el.id,
                            text:el.text,
                            completed:el.completed
                        })

                    }
                    })
                // for (let index = 0; index < tasks.length; index++) {
                //     if(tasks[index].text==newData.text)
                //     {
                //         tasks[index]=newData
                //         console.log("Logged Output:: taskdata", taskData[index])

                //     }
                    
                // }
                setTasks(newData)
            }
    }
    let toDo = tasks.filter((data)=>
    {
        if(data.completed==0)
        {
            return <Task key={data.id} task={data.text} completed={data.completed} changeData={changeData}></Task>
        }
        else
            return null
    })
    let inProgress = tasks.filter((data)=>
    {
        if(data.completed==1)
            return <Task key={data.id} task={data.text} completed={data.completed} changeData={changeData}></Task>
        else
            return null
    })
    let Finished = tasks.filter((data)=>
    {
        if(data.completed==2)
            return <Task key={data.id} task={data.text} completed={data.completed} changeData={changeData}></Task>
        else
            return null
    })
    return(
        <div className="cards">
            <Card  changeData={changeData} task={toDo} header="To Do"/>
            <Card  changeData={changeData} task={inProgress} header="In Progress"/>
            <Card  changeData={changeData} task={Finished} header="Finished"/>
        </div>
    )
}
export default Cards