Only render a react component when I on submit from a form

Question

I'm having trouble wrapping my head around only rendering a component after form data is submitted.

So I have an app that has the basic render:

(<div>
  <form onSubmit={this.onSubmit.bind(this)}>
  </form>
  <Results/>
</div>);

The idea is that onSubmit would dump some data into the Results component only at the time of submission.

Now I'll be honest the app would have values already within its state:

this.state = {
  length : 0,
  timeInSeconds: 0
}

So, I'd only want it to render or re-render this object when a user clicks the submit button and the onSubmit method executes.

I'm sorry this isn't clicking for me, but any advice or direction would be awesome!

Thanks, Kelly

Answer 1

Can you flag a completion status at the end of our onSubmit and render the results conditionally? Something like:

this.state = {
  length : 0,
  timeInSeconds: 0,
  isSubmitted: false
}

onSubmit(e) {
    // Do something
    this.setState({isSubmitted: true})
}

Then place a condition to render the results.

(<div>
  <form onSubmit={this.onSubmit.bind(this)}>
  </form>
  {this.state.isSubmitted && <Results/>}
</div>);