title: React js on submit function firing on page load
body: <p>I am new to React.  I am trying to put together a simple app with three components - a parent component (SearchContainer) and two children (SearchForm and ResultsContainer). The idea is for the input on the search form to update the state of SearchForm with the search query.  Then there is an onSubmit function for the form that triggers an AJAX request that takes the query, hits an API, and retrieves the search results.  Right now, the onSubmit function is firing as soon as the page loads and continues to fire over and over.  I can't figure out why this is happening.  Here is the code:</p>
  
  <p>SearchContainer (parent component):</p>
  
  <pre><code>var React = require('react');
  var ResultsContainer = require('./ResultsContainer.jsx')
  var SearchForm = require('./SearchForm.jsx')
  
  var SearchContainer = React.createClass({
    getInitialState: function () {
      return {
        results: null,
        formAction: 'http://localhost:3000/search',
        formMethod: 'get',
      };
    },
    executeSearch: function(query) {
      console.log("executing search");
      var data = {
        query: query,
      };
      $.ajax({
        url: this.state.formAction,
        data: data,
        dataType: 'json',
        success: this.successFunction,
        error: this.errorFunction,
      });
    },
  
    handleSearch: function(query) {
      this.executeSearch(query);
    },
    successFunction: function(response){
      console.log("success");
      this.setState({results: response["results"]});
    },
    errorFunction: function(){
      console.log("error");
    },
    render: function () {
      return (
       &lt;div className='center-text'&gt;
         &lt;SearchForm formAction={this.state.formAction} formMethod={this.state.formMethod} handleSearch={this.handleSearch}/&gt;  
         &lt;ResultsContainer results={this.state.results}/&gt;
       &lt;/div&gt;
      );
    },
  });
  
  module.exports = SearchContainer; 
  </code></pre>
  
  <p>SearchForm (child):</p>
  
  <pre><code>var React = require('react');
  var ResultsContainer = require('./ResultsContainer.jsx')
  
  
  var SearchForm = React.createClass ({
    getInitialState: function () {
      return {
        query: "",
      };
    },
  
    handleChange: function(event) {
      this.setState({query: event.target.value});
    },
  
    render: function () {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.props.handleSearch(this.state.query)} &gt;
            &lt;input className="query" type="text" placeholder="Search..." onChange={this.handleChange}&gt;&lt;/input&gt;
            &lt;input type="submit" value="Search" &gt;&lt;/input&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    },
  
  });
  
  module.exports = SearchForm;
  </code></pre>
  
  <p>What is causing the handleSearch function to fire over and over again? Thanks for your help.</p>