I am working with React and Django. I almost completed it, but when I delete a todo from the list, it is not updating the id number. For example, I have five todos in a list 1, 2,3, 4 and 5. When I delete number 4. It is showing 1, 2, 3, 5. It should be in sequence. It should be like 1, 2, 3 and 4.

I hope my question is understandable. Please help me with this issue.

My Main Component AddTodo.js

import React, { useState, useEffect } from "react";
import { Button, Form } from "react-bootstrap";
import API from "../API";

const AddTodo = () => {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [todoId, setTodoId] = useState(null);
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    refreshTodos();
  }, []);

  const refreshTodos = () => {
    API.get("/")
      .then((res) => {
        setTodos(res.data);
      })
      .catch(console.error);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    let item = { title, description };
    API.post("/", item).then(() => refreshTodos());
  };

  const onUpdate = (id) => {
    let item = { title };
    API.patch(`/${id}/`, item).then((res) => refreshTodos());
  };

  const onDelete = (id) => {
    API.delete(`/${id}/`).then((res) => refreshTodos());
  };

  function selectTodo(id) {
    let item = todos.filter((todo) => todo.id === id)[0];
    setTitle(item.title);
    setDescription(item.description);
    setTodoId(item.id);
  }

  return (
    <>
      <div className="container mt-5">
        <div className="row">
          <div className="col-md-4">
            <h3 className="float-left">Create a New Todo</h3>
            <Form onSubmit={onSubmit} className="mt-4">
              <Form.Group className="mb-3" controlId="formBasicName">
                <Form.Label>{todoId}Name</Form.Label>
                <Form.Control
                  type="text"
                  placeholder="Enter Name"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                />
              </Form.Group>

              <Form.Group className="mb-3" controlId="formBasicGenre">
                <Form.Label>Description</Form.Label>
                <Form.Control
                  type="text"
                  placeholder="Enter Description"
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                />
              </Form.Group>

              <div className="float-right">
                <Button
                  variant="primary"
                  type="submit"
                  onClick={onSubmit}
                  className="mx-2"
                >
                  Save
                </Button>
                <Button
                  variant="primary"
                  type="button"
                  onClick={() => onUpdate(todoId)}
                  className="mx-2"
                >
                  Update
                </Button>
              </div>
            </Form>
          </div>

          <div className="col-md-8 m">
            <table className="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Title</th>
                  <th scope="col">Description</th>
                </tr>
              </thead>
              <tbody>
                {todos.map((todo, index) => {
                  return (
                    <tr key={index}>
                      <th scope="row">{todo.id}</th>
                      <td> {todo.title}</td>
                      <td>{todo.description}</td>

                      <td>
                        <i
                          className="fa fa-pencil-square text-primary d-inline"
                          aria-hidden="true"
                          onClick={() => selectTodo(todo.id)}
                        ></i>
                        <i
                          className="fa fa-trash-o text-danger d-inline mx-3"
                          aria-hidden="true"
                          onClick={() => onDelete(todo.id)}
                        ></i>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
};

export default AddTodo;

CodePudding user response：

Id is a surrogate key:

The surrogate key is not derived from application data

The Id field should to be "hidden" from the user. Id's only responsibility is to identify the models.

You must consider adding a order field to your Todo model and keep it up to date (on backend) when you insert, reorder or delete a model.

CodePudding user response：

the ids of the todos is returned when calling the Django application and it's the id of the todo in your backend application.

an Id is a unique key used to identify a resource (here todo) and cannot be changed.

therefore if a todo has the key 546 for example it will always have the same key because it is used to identify this todo.

So to conclude, your component is displaying the correct anwser and there is no error here

PS: When displaying data we try to avoid exposing the id of the resource because the id is used internally in the application but has no value to the user

CodePudding user response：

to solve your "issue" you would have to rearrange the list of todos in your backend logic. This means you will have to iterate over all elements in your storage, calculate / check the key for each entity and update them accordingly. This brings a lot of issues to the table and further discussion about that is beyond the scope of this question.

I wouldn't recommend you to change the id of your entities at all. Just stick with the [1,2,4,7,8,9,...].

If you want to show a ordered list, display the current index after sorting:

<th scope="row">{index   1}</th>

If you want to rearrange your entities consider a extra property on your entities like 'orderIndex' and update this value accordingly on delete/add/write operations.