React todo list not updating edited task-CodePudding

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;

CodePudding user response：

You are modifying the internals of an object/array without changing its referencial identify.

setState operations only do anything if when React compares the old data to the new, it has changed. In the case of arrays and objects, they are compared by reference (as opposed to numbers, strings, and other primitives which are compared by value).

To set the state using a modified object, you need to reconstruct it into a new object.

Here is a demo of the issue: https://codesandbox.io/s/setstate-unchanged-h249v3?file=/src/App.js

Notice how one button prints to console, while the other doesn't.

CodePudding user response：

You could try doing this:

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