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

114
Views
How to submit the same form multiple times in React

I have a react app that requires the same form(s) to be submitted multiple times. Below is my code for the control panel class.

The values are entered into separate forms, and the button is pressed, sending the form input field values to another component for processing. After this is done, I would like to be able to re-submit the form (eg: simply click the button again) and for the processing to start over.

The formSubmit field (in this.state) is set to false initially, but set to true when the form is submitted. Once this is done, the {this.state.formSubmit && } line (near the end) ensures that the processing starts when the formSubmit value is set to true. Once the processing is done, I assume that simply setting the formSubmit value to false again will allow for the form to be submitted again, but I do not yet know how to do this.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {  BO_course: "",
                    BO_max_speed: "",     
                    formSubmit: false 
                  };
    this.handleInput = this.handleInput.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleInput (event) {
    const value = event.target.value;
    console.log(value);
    this.setState({
      ...this.state,
      [event.target.name]: value,
    });
  }

  handleFormSubmit (event) {
    console.log("Submitting form");
    event.preventDefault();
    this.setState({formSubmit: true});
    // this.setState({formSubmit: false})
  }

  render () {
    return (
      <div className="App">
        <div className="container">
     
          <form onSubmit={this.handleFormSubmit}>
            <label className="name">
              Name
              <input className="inputstyleright"
                type="text"
                name="nameinput"
                onChange={this.handleInput}
              />
            </label>
          </form>
          <form onSubmit={this.handleFormSubmit}>
            <label className="surname">
              Surname
              <input className="inputstyleright"
                type="text"
                name="surnameinput"
                onChange={this.handleInput}
              />
            </label>
            <input className="submitbutton" type="submit" value="Submit"/>
          </form>
        
          <div className="topleft">Control Panel</div>
          <div className="square"></div>
        </div>

        {/* only evaluates to true if the form has been submitted */}
        {this.state.formSubmit && <RM search1={this.state} />}
      </div>
    );
  }
}

export default App;
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I managed to solve it by updating the button to use an onClick function:

<input className="submitbutton" type="submit" value="Submit" onClick={()=>getRM(this.state)}/>

and changing

{this.state.formSubmit && <RM search1={this.state} />}

to just

{<RM />}

I also moved the function I was calling in the

<RM search1={this.state} />

part outside of the RM class itself. The function is now called by the onClick in the button eg: "getRM()"

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!