Why is submitting a form resetting my state?

Question

I am making a Kanban board project. It comes with a log in screen. I've added a button that I want to use to add new tasks to the board. However, when I submit to that button, it resets my email state to blank, which is my condition to returning to the log-in screen. Why? How can I prevent this? Any advice would be appreciated.

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initialData,
      email: this.props.email,
      password: this.props.password,
      showForm: false,
    };
    this.logOut = this.logOut.bind(this);
    
  }

  logOut() {
    console.log("Logged out");
    this.setState({ email: "", password: "" });
  }

  render() {
    const { showForm } = this.state;
    if (this.state.email == "") {
      return <LogIn />;
    } else {
      {
        //console.log(this.state);
      }
      return (
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Container>
            {this.state.initialData.columnOrder.map((columnId) => {
              const column = this.state.initialData.columns[columnId];
              const tasks = column.taskIds.map(
                (taskId) => this.state.initialData.tasks[taskId]
              );

              return <Column key={column.id} column={column} tasks={tasks} />;
            })}
          </Container>
          <button onClick={this.logOut}>Log Out</button>

          <button onClick={() => this.hideComponent("showForm")}>
            Create Task
          </button>

          <Container>
            <div>
              {showForm && <CreateForm onSubmit={(value) => alert(value)} />}
            </div>
          </Container>
        </DragDropContext>
      );
    }
  }
}

CreateForm.js

class CreateForm extends React.Component {
  render() {
    console.log("form");
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Content:
          <input type="text" />
        </label>
        <input type="submit" value="Submit" onSubmit={event => props.onSubmit(event.target.value)}/>
      </form>
    );
  }
}

export default CreateForm;

Answer 1

handleSubmit(event) {
    event.preventDefault(); // we need this for avoid your behavior

    // your code
}