Design a kanban board in reactJS

Question

Attempting to write a simple Kanban board in ReactJS. Omiting the css code, mostly wanted some advise on best practices in the ReactJS code itself.

export default function App() {
  const [todo, setTodo] = React.useState(["finish xyz", "finish abc"]);
  const [inprogress, setInprogress] = React.useState(["hello world"]);
  const [done, setDone] = React.useState(["hey there!"]);

  const moveLeft = (type, taskname) => {
    if (type === "inprogress") {
      setInprogress([...inprogress.filter((val) => val !== taskname)]);
      setTodo([...todo, taskname]);
    } else if (type === "done") {
      setDone([...done.filter((val) => val !== taskname)]);
      setInprogress([...inprogress, taskname]);
    }
  };

  const moveRight = (type, taskname) => {
    if (type === "todo") {
      setTodo([...todo.filter((val) => val !== taskname)]);
      setInprogress([...inprogress, taskname]);
    } else if (type === "inprogress") {
      setInprogress([...inprogress.filter((val) => val !== taskname)]);
      setDone([...done, taskname]);
    }
  };

  return (
    <div className="board">
      <div className="todo">
        <div>TODO</div>
        {todo.map((curr) => (
          <Task
            key={curr.replaceAll(" ", "-")}
            moveLeft={moveLeft}
            moveRight={moveRight}
            type="todo"
            taskName={curr}
          />
        ))}
      </div>
      <div className="inprogress">
        <div>INPROGRESS</div>
        {inprogress.map((curr) => (
          <Task
            key={curr.replaceAll(" ", "-")}
            moveLeft={moveLeft}
            moveRight={moveRight}
            type="inprogress"
            taskName={curr}
          />
        ))}
      </div>
      <div className="done">
        <div>DONE</div>
        {done.map((curr) => (
          <Task
            key={curr.replaceAll(" ", "-")}
            moveLeft={moveLeft}
            moveRight={moveRight}
            type="done"
            taskName={curr}
          />
        ))}
      </div>
    </div>
  );
}

function Task(props) {
  return (
    <div className="task">
      <div>{props.taskName}</div>
      <button onClick={() => props.moveLeft(props.type, props.taskName)}>
        left
      </button>
      <button onClick={() => props.moveRight(props.type, props.taskName)}>
        right
      </button>
    </div>
  );
}

Answer 1

1. Consider use of useReducer instead of multiple state variables. It helps keep component clean by moving all this transition logic outside of the component.
2. Extract types ("inprogress", "todo", "done") as constants. It's easy to maintain all these magic string when they are constants.
3. filter creates copy of array, spreading is unnecessary.
4. There are no restrictions on key value, it can contain spaces.
5. I suggest to pass click handlers to the Task component to make it dumber.