Page made with ReactJS reloading even after adding preventDefault

Question

I am trying to make a basic todo app and when I am trying to a new tody the page is reloading. I added on the handler function in react but still the page is reloading when I click Add Todo button.

import { useState } from "react";
import classes from "./TodoForm.module.css";
const TodoForm = (props) => {
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredDescription, setEnteredDescription] = useState("");
  const titleChangeHandler = (e) => {
    setEnteredTitle(e.target.value);
    console.log(enteredTitle);
  };
  const desChangeHandler = (e) => {
    setEnteredDescription(e.target.value);
  };
  const addTodoHandler = (event) => {
    event.preventDefaults();
    props.addItem(
      props.todos.push({
        id:Math.random()*100000000,
        title: enteredTitle,
        desc: enteredDescription,
      })
    );
  };
  return (
    <div className={classes["form-container"]}>
      <h2>Add Todo</h2>
      <form onSubmit={addTodoHandler}>
        <input
          onChange={titleChangeHandler}
          type="text"
          name="title"
          id="title"
          placeholder="Title"
          value={enteredTitle}
        />
        <textarea
          onChange={desChangeHandler}
          name="description"
          placeholder="Description"
          id=""
          cols="30"
          rows="10"
          value={enteredDescription}
        ></textarea>
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
};
export default TodoForm;

I tried with different ways but not able to figure out what am I doing wrong.

Answer 1

It's event.preventDefault(), not event.preventDefaults().