REACT: How to swap elements in To Do list by their priorities

Question

I'm doing to do list and I want to make function that swap tasks by their priorities. For example:

1. Go to gym

2. Learn react

   I want to make button that move elements up and down and get:

   1. Learn react

   2. Go to gym

I have function that I'm pretty sure working correct but I think problem in <div> where I use this function

const moveUpDown = (currentIndex, nextIndex) =>{
  const newCounts = [...todos]

  const currentCounts = newCounts[currentIndex]
  const previousCounts = newCounts[nextIndex]

  newCounts[currentIndex] = previousCounts
  newCounts[nextIndex] = currentCounts

  setTodos(newCounts)
}

This is my return:

function ToDo(props) {
    return (
        <div key={props.todo} className="item-todo">
            <div 
                className={props.todo.complete ? "item-text strike" : "item-text"}
                onClick={() => props.toggleTask(props.todo.id)}
                >
                {props.todo.task}
            </div>
            <div className="item-delete" onClick={() => props.removeTask(props.todo.id)}>
                X
            </div>
// Lines below I'm using function moveUpDown
            <div
                className="item-moveUpDown" disabled = {props.todo === 0} onClick={() => props.moveUpDown(props.todo, props.todo - 1)}
                >
                Up
            </div>
            <div
                className="item-moveUpDown" disabled = {props.todo === 0} onClick={() => props.moveUpDown(props.todo, props.todo + 1)}
            >
                Down
            </div>
        </div>
    )
}

Answer 1

The parameters you're passing to moveUpDown don't make sense - it looks like they should be numbers, but you're passing props.todo which is an object.

Maybe if you changed the moveUpDown function to accept the "to do" you want to move, and a delta to indicate which direction you wanted to move it; eg:

const moveUpDown = (todo, delta) =>{
  const newCounts = [...todos];

  // Remove from the array
  const currentIndex = newCounts.indexOf(todo);
  newCounts.splice(currentIndex, 1);

  // Now put it back in at the new position
  newCounts.splice(currentIndex + delta, 0, todo);

  setTodos(newCounts)
}

Now you can change your callers, eg:

<div
    className="item-moveUpDown"
    disabled={props.todo === 0}
    onClick={() => props.moveUpDown(props.todo, 1)}
>
    Down
</div>

Note also that your disabled attribute doesn't make sense - props.todo is an object so it will never be equal to zero. Perhaps you should be passing the index of the todo item as a separate property?