title: All Buttons in React JS Trigger onSubmit
body: <p>I am working on a project using React, please note that I am still new to the Framework, and I have negligible experience with web development.</p>
  
  <p>I am creating a form where managers can add skills for their users to take, but the thing is this form contains many buttons, and any button would trigger the onSubmit event.</p>
  
  <p>Is there a way to overcome this?</p>
  
  <p>Here is the code to my form:</p>
  
  <p><strong>TL;DR, The code to only the form is present in the final snippet.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Textbox = React.createClass({
  
    getInitialState: function() {
      return {
        value: ''
      };
    },
  
    changeValue: function(event) {
      this.setState({
        value: event.target.value
      });
      console.log(this.state.value);
    },
  
    render: function() {
      return ( &lt;
        div &gt;
        &lt;
        label &gt; {
          this.props.children
        } &lt; /label&gt; &lt;
        input type = "text"
        ref = "input"
        id = "textbox"
        value = {
          this.state.value
        }
        onChange = {
          this.changeValue
        }
        /&gt; &lt; /
        div &gt;
      );
  
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Numbox = React.createClass({
  
    getInitialState: function() {
      return {
        value: ''
      };
    },
  
    changeValue: function(event) {
      this.setState({
        value: event.target.value
      });
      console.log(this.state.value);
    },
  
    render: function() {
      return ( &lt;
        div &gt;
        &lt;
        label &gt; {
          this.props.children
        } &lt; /label&gt; &lt;
        input type = "number"
        ref = "input"
        id = "textbox"
        value = {
          this.state.value
        }
        onChange = {
          this.changeValue
        }
        /&gt; &lt;
        /div&gt;
      );
  
    }
  });
  
  var RatingDropdown = React.createClass({
    getInitialState: function() {
      return ({
        value: 'Level 5'
      });
    },
  
    handleChange: function(event) {
      this.setState({
        value: event.target.value
      });
    },
  
    render: function() {
      return ( &lt;
        div &gt;
        &lt;
        label &gt; Rating: &lt; /label&gt; &lt;
        select value = {
          this.state.value
        }
        onChange = {
          this.handleChange
        }
        id = "optionbox" &gt;
        &lt;
        option value = "1" &gt; Rating 1 &lt; /option&gt; &lt;
        option value = "2" &gt; Rating 2 &lt; /option&gt; &lt;
        option value = "3" &gt; Rating 3 &lt; /option&gt; &lt;
        option value = "4" &gt; Rating 4 &lt; /option&gt; &lt;
        option value = "5" &gt; Rating 5 &lt; /option&gt; &lt;
        option value = "6" &gt; Rating 6 &lt; /option&gt; &lt;
        option value = "7" &gt; Rating 7 &lt; /option&gt; &lt;
        option value = "8" &gt; Rating 8 &lt; /option&gt; &lt;
        option value = "9" &gt; Rating 9 &lt; /option&gt; &lt;
        option value = "10" &gt; Rating 10 &lt; /option&gt; &lt;
        option value = "11" &gt; Rating 11 &lt; /option&gt; &lt;
        option value = "12" &gt; Rating 12 &lt; /option&gt; &lt;
        /select&gt;     &lt;
        /div&gt;
      )
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Prereq = React.createClass({
    getInitialState: function() {
      return {
        editing: false
      };
    },
  
    edit: function() {
      this.setState({
        editing: true
      });
    },
  
    save: function() {
      var val = this.refs.input.value;
      this.props.updatePrereqText(this.refs.input.value, this.props.index)
      console.log(val);
      this.setState({
        editing: false
      });
    },
  
    remove: function() {
      this.props.removePrereqText(this.props.index);
    },
  
    renderNormal: function() {
      return ( &lt;
        div &gt;
        &lt;
        label &gt; idPrerequisite_Skill: &lt; /label&gt; &lt;
        div &gt; {
          this.props.children
        } &lt; /div&gt; &lt;
        button onClick = {
          this.edit
        } &gt; Edit &lt; /button&gt; &lt;
        button onClick = {
          this.remove
        } &gt; Delete &lt; /button&gt; &lt;
        /div&gt;
      );
    },
  
    renderForm: function() {
      return ( &lt;
        div &gt;
        &lt;
        label &gt; idPrerequisite_Skill: &lt; /label&gt; &lt;
        input type = "number"
        ref = "input"
        defaultValue = {
          this.props.children
        }
        /&gt; &lt;
        button onClick = {
          this.save
        } &gt; save &lt; /button&gt; &lt;
        /div&gt;
      );
    },
  
    render: function() {
      if (this.state.editing) {
        return this.renderForm();
      } else {
        return this.renderNormal();
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var PrereqCollection = React.createClass({
  
        getInitialState: function() {
          return {
            prerequisites: []
          }
        },
  
        addPrereq: function(text) {
          var temp = this.state.prerequisites;
          temp.push(text);
          this.setState({
            prerequisites: temp
          });
        },
  
        removePrereq: function(i) {
          console.log('Removing Prereq: ' + i);
          var temp = this.state.prerequisites;
          temp.splice(i, 1);
          this.setState({
            prerequisites: temp
          });
        },
  
        updatePrereq: function(newText, i) {
          console.log('Updating Prereq: ' + i);
          var temp = this.state.prerequisites;
          temp[i] = newText;
          this.setState({
            prerequisites: temp
          });
        },
  
        eachPrereq: function(text, i) {
          return ( &lt;
              Prereq key = {
                i
              }
              index = {
                i
              }
              updatePrereqText = {
                this.updatePrereq
              }
              removePrereqText = {
                this.removePrereq
              } &gt; {
                text
              } &lt; /Prereq&gt;);
            },
  
            render: function() {
              return ( &lt;
                div &gt;
                &lt;
                label &gt; Prerequisites: &lt; /label&gt;  &lt;
                button onClick = {
                  this.addPrereq.bind(null, '1')
                } &gt; Add &lt; /button&gt; {
                  this.state.prerequisites.map(this.eachPrereq)
                } &lt;
                /div&gt;
              );
            }
  
        });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Form = React.createClass({
  
    handleSubmit: function(evt) {
      alert('An essay was submitted: ');
      evt.preventDefault();
    },
  
    render: function() {
      return ( &lt;
        form onSubmit = {
          this.handleSubmit.bind(this)
        } &gt;
        &lt;
        Textbox &gt; Name: &lt; /Textbox&gt; &lt;
        RatingDropdown &gt; Rating: &lt; /RatingDropdown&gt; &lt;
        Numbox &gt; idParent_Skill: &lt; /Numbox&gt; &lt;
        PrereqCollection / &gt;
        &lt;
        input type = "submit"
        value = "Submit" / &gt;
        &lt;
        /form&gt;
      );
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>