Accepted answer

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.

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


You need to do the following:

  1. have a boolean in your component's state to indicate if form is being submitted or not. By default, it should be set to false. When the user clicks on submit, it should be updated to true.
  2. pass this boolean's value to the Result component in props.
  3. in Result component check the value of this prop value in render method, and return the appropriate JSX (div with nested child or empty div).
  4. set the boolean back to false when submit is complete.


This is how I would go about it. I did on the fly, but I'm pretty sure this is what you need. I hope am right :) Let me know if it was helpful

       import React, { Component } from 'react';
       import Results from './results';

       class FormData extends component {
             constructor(props) {
                  this.state = {
                  name: '',
                  age: null,
                  submitted: false
                    this.onChange = this.onChange.bind(this);
                    this.onSubmit = this.onSubmit.bind(this);
                    // Let's 1st make a onChane function and get the form data 
                   onChange(e) {
                     this.setState({ []: });  // Getting access to entered values

                // Let's make an onSubmit function
                  onSubmit(e) {
                    e.preventDefault();  // Here we prevent the default browser behavior
                    this.setState({isSubmitted: true}); // Let's set the new 'submitted state to TRUE

               // Gathering data in order to pass it to the <Results /> component

                    const formData = {
                      age: this.state.age

                    this.props.makeResultsData(formData);  // Passing the data down as props

              // Let's render the necessary data including the results component 

           render() {
              return (

          // Little bit of destructuring
         // This is equal to const submitted = this.state.submitted
          { submitted } = this.state;  

        <div className="container">
          <form onSubmit={this.onSubmit}>
                      placeholder="Enter your name"
                      placeholder="Enter your age"

        // Let's finally SUBMIT our form and change the states 'submitted' value to TRUE

               <input type="submit" value="Submit" />


// With conditional rendering ,we can now display our <Results /> component, like this

  {this.state.isSubmitted && <Results/>}  // So, if submitted = true, render the Results component


Related Query

More Query from same tag