How can I make the currently selected todo get updated with the modified value?

Question

I am making a todo app to sharpen my react skills with hooks and I want to make a function updateTask to update the currently selected task with whatever I type in the input after the getCurrentTask function is triggered, which populates the input value with the currently selected task's text value.

This is the updateTask function:

function updateTask(statePlaceholder, id) {
  const updatedTaskIndex = statePlaceholder.tasks.findIndex(
    task => task.id === id
  );
  const updatedTask = statePlaceholder.tasks.map(task => {
    return { ...task, text: statePlaceholder.currentTask.text };
  });
  const updatedTasks = [
    ...statePlaceholder.tasks.slice(0, updatedTaskIndex),
    updatedTask,
    ...statePlaceholder.tasks.slice(updatedTaskIndex + 1)
  ];

  return {
    ...statePlaceholder,
    tasks: updatedTasks,
    currentTask: null
  };
}

and I use this function in the handleSubmit function in the form

function handleSubmit(e) {
    e.preventDefault();

    state.currentTask
      ? setState(updateTask(state, state.currentTask.id))
      : setState(createTask(state, value));

    setValue("");
  }

I want to be able to update the currently selected task.

Answer 1

The logic of your code is basically returning a collection of updates tasks.

And then the problem is that you're having duplicate keys in your statePlaceholder.tasks list

Why you need to replace the text in all your statePlaceholder.tasks,

It seems that you are returning an array here (many tasks and not just one task) so this causes later on the duplicate keys error

 const updatedTask = statePlaceholder.tasks.map(task => {
    return { ...task, text: statePlaceholder.currentTask.text };
  });

its better that change to:

      const updatedTask = statePlaceholder.tasks.filter(task => task.id === id)
      updatedTask.text= statePlaceholder.currentTask.text;

      const updatedTasks = [
        ...statePlaceholder.tasks.slice(0, updatedTaskIndex),
        updatedTask,
        ...statePlaceholder.tasks.slice(updatedTaskIndex + 1)
      ];

so I looked at your code posted at the sandbox and the problem is that function updateTask(statePlaceholder, id)

parameter id is arriving as undefined, and then updatedTaskIndex -> -1

You are only setting the name of the task and not the object(with the id) here:

  <input
        type="text"
        className="App_input"
        placeholder="Type Task"
        value={value}
        onChange={e => setValue(e.target.value)}
      />

Answer 2

In your code snippet, you have training = np.vstack((img, training)).

The error seems to occur because of the training inside of vstack function. You try to replace training with training when training is not defined.

Answer 3

You are trying to reference a variable that is still undefined.

training = np.vstack((img, training)) # training isnt defined yet

In the execution priority on this snippet, the last action to take place is the assignment, so when you try to reference training in:

np.vstack((img, training))

The compiler could not find any definition for training at that moment.

You should initialize the training variable first and later make use of it.