Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

156
Views
Why is submitting a form resetting my state?

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;

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

    // your code
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!