title: Using react HOC with a form. Passing common JSX and state down using a HOC
body: <p>I just finished up a pretty big project that uses a form in different parts of a react app. The form is identical throughout however the functionality is different depending on where the form is being used.</p>
  
  <p>So right now I have multiple Components with duplicate forms. All of these forms are controlled i.e (use this.state... for the value) the only difference is the render methods and what happens to the form data on certain button events.</p>
  
  <p>I realize this is horrible coding and really want to use a HOC to make these components way more flexible and cleaner.</p>
  
  <p>this is one of the forms, There are 2 more similar to this.</p>
  
  <pre><code>sampleForm = (
              &lt;form action="" name="sample"&gt;
                  &lt;div className="group"&gt;
                      &lt;label htmlFor=""&gt;Descriptive Name:&lt;/label&gt;
                      &lt;input type="text" name="name" value={this.state.name}
                          onChange={this.handleChange} placeholder="Descriptive Name" /&gt;
                  &lt;/div&gt;
                  &lt;div className="group"&gt;
                      &lt;label&gt;Sample Codename:&lt;/label&gt;
                      &lt;input type="text" name="codeName" value={this.state.codeName}
                          onChange={this.handleChange} placeholder="Ex: MM_MG_01" /&gt;
                  &lt;/div&gt;
                  &lt;div className="group"&gt;
                      &lt;label htmlFor=""&gt;GPS Coordinates:&lt;/label&gt;
                      &lt;input type="text" name="coords" value={this.state.coords}
                          onChange={this.handleChange} placeholder="GPS Coordinates" /&gt;
                  &lt;/div&gt;
                  &lt;div className="group"&gt;
                      &lt;label htmlFor=""&gt;Metagenomic Data:&lt;/label&gt;
                      &lt;textarea type="text" name="METAdesc" value= 
                       {this.state.METAdesc}
                          onChange={this.handleChange} placeholder="Image Description" rows={7} /&gt;
                      &lt;input type="file" name="METAimage"
                          onChange={this.handleChange} /&gt;
                  &lt;/div&gt;
                  {notes}
              &lt;/form&gt;
          )
  </code></pre>
  
  <p>I currently have these three duplicated in the render method ( four times :/ )</p>
  
  <p>How can I pass these three down to components? </p>