To-Do-List Кнопка добавления нового элемента ничего не добавляет

Question

Я все еще новичок в React, и у меня так много проблем с выяснением, в чем проблема, я знаю, что это должно быть что-то с вызовом функции, также пытался отлаживать, но не работал, не знаю другого способа ( инструменты) как узнать, в чем проблема.

App.tsx

const App = () => {

  const [tasks, setTasks] = useState<string[]>(["Task1", "Task2"]);

  const addTask = (task : string) => {
    setTasks([...tasks, task]);
  }
  return (
    <div>
      <SubmissionBox tasks={tasks} addTask={addTask}/>
      <Tasks tasks={tasks}/>
    </div>
  );
}

export default App;

SubmissionBox.tsx

interface ISubmissionProps {
  tasks : string[];
  addTask : (task : string) => void;
}

const SubmissionBox = (props : ISubmissionProps) => {
    const [task, setTask] = useState("");
    const onTaskChange = (e : any) : void => {
        setTask(e.target.value);
    }
    return (
        <>
        <InputGroup>
            <Input placeholder="Add new task..." value={task} onChange={onTaskChange}/>
            <Button color="success" type="submit" onSubmit={() => props.addTask(task)}>Submit</Button>
        </InputGroup>
        </>
    );
}

export default SubmissionBox;

Tasks.tsx

const Tasks = ({tasks} : {tasks:string[]}) => {

  return (
    <>
      <ListGroup>
        {tasks.map((item: any, i: any) => (
          <ListGroupItem className="d-flex justify-content-between" key={i}>{item}<Button color="danger">Remove</Button></ListGroupItem>
        ))}
      </ListGroup>
    </>
  );
};

export default Tasks;

Answer 1

На кнопке нужно изменить проп onSubmit на onClick

<Button color="success" type="button" onClick={() => props.addTask(task)}>Submit</Button>