React todo list not updating edited task

October 27, 2022

The edited task reflects on browser only when I delete an existing task or add a new one.
The edited task is even reflected in the prompt as the pre-existing task, but the edited text is not reflected in the task.

import * as React from 'react';
import Card from 'react-bootstrap/Card';
import Add from './Add';
import List from './List';
import Table from 'react-bootstrap/Table';

const Main = () => {
    const [listData, setListData] = React.useState([]);

    const listDataMani = (text) => {
        const listDataObj = {
            id: listData.length + 1,
            text: text,
        }
        const finalList = [...listData, listDataObj]
        setListData(finalList);
    }

    const listDataDelete = (id) => {
        const finalData = listData.filter(function (el) {
            if (el.id === id) {
                return false;
            } else {
                return true;
            }
        })

        setListData(finalData);
    }

    const editTaskHandler = (t, li) => {
        let compData = listData;           // this is the function to update text
            for (let i = 0; i < listData.length; i++) {
                if (listData[i].id === li) {
                    listData[i].text = t;
                } else {
                    return;
                }
            }
        setListData(compData);
        
    }



return (
    <><div className='container'>
        <div className='col-lg-12'>
            <div className='main-component'>
                <div className='title'>
                    <Card style={{ marginTop: "10em" }}>
                        <Card.Body>
                            <Card.Title>My Todo List</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted">Manages Time</Card.Subtitle>
                            <Add listDataMani={listDataMani} />
                            <Table striped bordered hover>
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Task Name</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <List callback={listDataDelete} editTask={editTaskHandler} list={listData} />
                                </tbody>
                            </Table>
                        </Card.Body>
                    </Card>
                </div>
            </div>
        </div>
    </div></>
)
}

export default Main;

import * as React from 'react';

const List =(props)=>{
    const deleteHandler =(id)=>{
        props.callback(id);
    }
    
    const editRequestHandler =(data)=>{
        let editedText = prompt("Edit Your Task", data.text);
        props.editTask(editedText, data.id);
    }

    return (
        <> 
            {props.list.map((el)=>(<tr>
                <td>{el.id}</td>
                <td>{el.text}</td>
                <td>
                    <button onClick={function(){
                        deleteHandler(el.id)
                    }}>X</button>
                    <button onClick={()=>{editRequestHandler(el)}}>✍</button>
                </td>
            </tr>))}      
        </>
    )
}

export default List;

>Solution :

You could try doing this:

const editTaskHandler = (t, li) => {
    setListData(
      listData.map((item) => {
        if (item.id === li) {
          return { ...item, text: t };
        }
        return item;
      })
    );
};