title: React - conditionally not send data key in form submission
body: <p>I'm trying to omit a value <code>onSubmit</code> if a checkbox is selected, eliminating the need for a specific label/input. If I check the <code>indefinite runTime</code> box, <code>runTimeSeconds</code> key no longer needs to be sent in the payload, is this something that's done in handleSubmit method itself?</p>
  
  <p>When the form is submitted, with the checkbox selected, it's still sending the <code>runTimeSeconds</code> key is still being sent with the default state value.</p>
  
  <p>Here's a sandbox with replicating the issue: <a href="https://codesandbox.io/s/5vvpj40rqk" rel="nofollow noreferrer">https://codesandbox.io/s/5vvpj40rqk</a></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  
  import "./styles.css";
  
  class Params extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        windowLengthSeconds: 1,
        runTimeSeconds: 1,
        indefiniteCheckbox: false
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange = e =&gt; {
      this.setState({ [e.target.name]: e.target.value });
      this.props.handleChange(e);
      console.log([e.target.value]);
      const value =
        e.target.type === "checkbox" ? e.target.checked : e.target.value;
  
      this.setState({
        [e.target.name]: value
      });
    };
  
    render() {
      const { indefiniteCheckbox } = this.state;
      return (
        &lt;div className="params-boxes"&gt;
          &lt;div className="checkbox"&gt;
            &lt;label&gt;Indefinite runTime:&lt;/label&gt;
            &lt;input
              type="checkbox"
              name="indefiniteCheckbox"
              value={this.state.indefiniteCheckbox}
              onChange={this.handleChange}
            /&gt;
          &lt;/div&gt;
          {!indefiniteCheckbox &amp;&amp; (
            &lt;div&gt;
              &lt;label&gt;runTimeSeconds:&lt;/label&gt;
              &lt;input
                type="number"
                name="runTimeSeconds"
                value={this.state.runTimeSeconds}
                onChange={this.handleChange}
                placeholder="1"
                min="1"
                required
              /&gt;
            &lt;/div&gt;
          )}
          &lt;div&gt;
            &lt;label&gt;windowLengthSeconds:&lt;/label&gt;
            &lt;input
              type="number"
              name="windowLengthSeconds"
              value={this.state.windowLengthSeconds}
              onChange={this.handleChange}
              placeholder="1"
              min="1"
              step="1"
              required
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  class App extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        runtimeSeconds: 1,
        windowLengthSeconds: 1,
        indefiniteCheckbox: false
      };
    }
  
    handleChange = ({ target: { name, value } }) =&gt; {
      this.setState({ [name]: value });
      console.log([name, value]);
    };
  
    handleSubmit = e =&gt; {
      e.preventDefault();
      data: JSON.stringify({
        parameters: {
          "stream.runtime.seconds": this.state.runTimeSeconds,
          "stream.window.length.seconds": this.state.windowLengthSeconds
        }
      });
      console.log(this.state);
    };
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;div&gt;
            &lt;div&gt;
              &lt;fieldset&gt;
                &lt;legend&gt;Parameters&lt;/legend&gt;
                &lt;div&gt;
                  &lt;Params handleChange={this.handleChange} /&gt;
                &lt;/div&gt;
              &lt;/fieldset&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="btn-group"&gt;
            &lt;span className="input-group-btn"&gt;
              &lt;button
                className="btnSubmit"
                handleSubmit={this.handleSubmit}
                type="submit"
              &gt;
                Submit
              &lt;/button&gt;
              &lt;button
                className="btnReset"
                handleCancel={this.handleCancel}
                type="reset"
                onClick={() =&gt; {
                  alert(
                    "Are you sure you want to cancel? Doing so will reset this page."
                  );
                }}
              &gt;
                Cancel
              &lt;/button&gt;
            &lt;/span&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      );
    }
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>