How to edit in Typescript with react

I’m very new to Typescript with react, I’ve created a To Do List as simple as I can understand. I’ve gone so far that I can add, display and delete an item but I can’t get to edit it. I can click on row and the correct text appears in the textbox but I can not save that. I hope someone can put me to right direction.

import { Box, TextField, Button } from "@mui/material";
import { useState } from "react";

export const List = () => {
  const [task, setTask] = useState("");
  const [taskList, setTaskList] = useState(['']);
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState<string>(task);

  
  const handleSubmit = () => {
    if (task.trim() !== "") {
      setTaskList((t) => [...t, task]);
      setTask("");
    }
  };

  const handleEditSubmit = (e:any) => {
    let text = e.target.value;
    setEditText(text);
    console.log(editText);
  }

  const handleDelete = (index: number) => {
    const deleteTasks = taskList.filter((_, i) => i !== index);
    setTaskList(deleteTasks);
  };

  const handleEdit = (index: number) => {
    setIsEditing(true);
    const selectedTask = taskList.find((_, i) => i === index);
    const unquoted = JSON.stringify(selectedTask).replace(/"/g, "");
    setTask(unquoted);
  };

  return (
    <Box>
      {isEditing ? (
    <>
      <TextField
        label="Edit Task"
        variant="outlined"
        onChange={(e) => setTask(e.target.value)}
        value={task}
      />
      <Button variant="contained" type="submit" onClick={(e) => handleEditSubmit}>
        Submit Edit
      </Button>
    </>
      ) : (
    <>
      <TextField
        label="New Task"
        variant="outlined"
        onChange={(e) => setTask(e.target.value)}
        value={task}
      />
      <Button variant="contained" type="submit" onClick={handleSubmit}>
        Submit
      </Button>
    </>
      )}
      <ol>
    {taskList.map((task, index) => (
      <li key={index}>
        <span>{task}</span>
        <button onClick={() => handleDelete(index)}>Delete</button>
        <button onClick={() => handleEdit(index)}>Edit</button>
      </li>
    ))}
      </ol>
    </Box>
  );
};

>Solution :

Updating the Task List with Edited Text:
You need to update the task in your taskList with the new task value when you submit the edit. Currently, handleEditSubmit is setting the editText but not using it to update taskList.

State Management for Edit Mode:
You should manage which task is being edited. You’ll need an additional state to track the index of the task being edited.

import { Box, TextField, Button } from "@mui/material";
import { useState } from "react";

export const List = () => {
  const [task, setTask] = useState("");
  const [taskList, setTaskList] = useState<string[]>([]);
  const [isEditing, setIsEditing] = useState(false);
  const [editIndex, setEditIndex] = useState<number | null>(null);

  const handleSubmit = () => {
    if (task.trim() !== "") {
      setTaskList((t) => [...t, task]);
      setTask("");
    }
  };

  const handleEditSubmit = () => {
    if (editIndex !== null && task.trim() !== "") {
      setTaskList((tasks) =>
        tasks.map((t, index) => (index === editIndex ? task : t))
      );
      setIsEditing(false);
      setTask("");
      setEditIndex(null);
    }
  };

  const handleDelete = (index: number) => {
    const deleteTasks = taskList.filter((_, i) => i !== index);
    setTaskList(deleteTasks);
  };

  const handleEdit = (index: number) => {
    setIsEditing(true);
    setEditIndex(index);
    setTask(taskList[index]);
  };

  return (
    <Box>
      {isEditing ? (
        <>
          <TextField
            label="Edit Task"
            variant="outlined"
            onChange={(e) => setTask(e.target.value)}
            value={task}
          />
          <Button variant="contained" onClick={handleEditSubmit}>
            Submit Edit
          </Button>
        </>
      ) : (
        <>
          <TextField
            label="New Task"
            variant="outlined"
            onChange={(e) => setTask(e.target.value)}
            value={task}
          />
          <Button variant="contained" onClick={handleSubmit}>
            Submit
          </Button>
        </>
      )}
      <ol>
        {taskList.map((task, index) => (
          <li key={index}>
            <span>{task}</span>
            <button onClick={() => handleDelete(index)}>Delete</button>
            <button onClick={() => handleEdit(index)}>Edit</button>
          </li>
        ))}
      </ol>
    </Box>
  );
};