title: React: Component with just a form, form submit action differs depending on consumer of the component
body: <p>I have a React Component which displays a simple search form. I am using "Controlled Components" (<a href="https://reactjs.org/docs/forms.html" rel="nofollow noreferrer">https://reactjs.org/docs/forms.html</a>) so that the React component stores the search criteria and is the source of truth.</p>
  
  <pre><code>class SearchForm extends React.Component {    
  
      constructor(props) {
          super(props);
          this.state = {criteria: ''};    
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      handleChange(event) {
          this.setState({criteria: event.target.value});
      }
  
      handleSubmit(event) {
          event.preventDefault();
          // only submit the search if there is search criteria
          if (this.state.criteria.length &gt; 0){
              // I need to be able to set some state here
              this.setState({
                     .....
              });
              // i also need to access this.props here
              if (this.props......) ...
          }
      }
  
      render() {
          return (
              &lt;form onSubmit={this.handleSubmit} &gt;
  
                  &lt;input type="text" 
                         placeholder="Search"
                         value={this.state.criteria} 
                         onChange={this.handleChange} /&gt;
  
                  &lt;button ...... /&gt;
              &lt;/form&gt;
          );
      }
  }
  </code></pre>
  
  <p>I want to use this SearchForm in 2 places. </p>
  
  <ul>
  <li>Search Box in a header : when the form submits it redirects to another page in my app</li>
  <li>Search box on the search page : when the form submits it updates the search list below the search form </li>
  </ul>
  
  <p>Therefore the SearchForm's onSubmit method can not have the code to perform onForm submit as this code will vary depending on the SearchForms usage.</p>
  
  <p>I know how to add the search form in my components HTML, For example in Component1's render method i would have </p>
  
  <pre><code>&lt;div&gt;
      &lt;SearchForm /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However I do not know how to handle the SearchForms onSubmit differently for each component which is consuming the search form. Its like i want the SearchForm's onSubmit to call a method in the containing component passing the SearchForm's state.criteria value</p>
  
  <p>How can i reuse the SearchForm component in other components which have different on form submit actions?</p>