title: How to pass value from custom component class to redux-form?
body: <p>I'm calling a custom component in my redux-form.</p>
  
  <pre><code>&lt;Field name="myField" component={SiteProjectSelect}/&gt;
  </code></pre>
  
  <p>This component is a combination of two combo boxes. The second box is dependant on the value of the first on - i.e. depending on what site you select, you can choose from a list of projects. What I'd like to do is get the form to receive the selected site and the selected projects. However, I'm not sure how to pass the values to the redux-form.</p>
  
  <pre><code>class SiteProjectSelect extends Component {
      constructor() {
          super();
          this.state = {
              selectedSite: null,
              selectedProject: null,
          };
      }
  
      handleSiteSelection = selectedSite =&gt; {
          console.log(selectedSite)
          this.setState({ selectedSite, selectedProject: null });
      };
  
      handleProjectSelection = selectedProject =&gt; {
          this.setState({ selectedProject });
          this.props.input.onChange(selectedProject.value); 
      };
  
      render() {
          const selectedRow = this.state.selectedSite ? projects.find((node) =&gt; node.site === this.state.selectedSite.value) : "";
          const filteredProjectOptions =  selectedRow ? selectedRow.projects.map(project =&gt; ({ value: project, label: project })) : []
  
          return (
              &lt;div {...this.props} &gt;
                  &lt;label&gt;Site&lt;/label&gt;
                  &lt;div style={{ marginBottom: '20px' }} &gt;
                      &lt;Select
                          name="site"
                          value={this.state.selectedSite}
                          onChange={this.handleSiteSelection}
                          options={siteOptions}
                          isSearchable
                      /&gt;
                  &lt;/div&gt;
                  &lt;div style={{ marginBottom: '20px' }} &gt;
                      &lt;label&gt;Project&lt;/label&gt;
                      &lt;Select
                          name="project"
                          value={this.state.selectedProject}
                          onChange={this.handleProjectSelection}
                          options={filteredProjectOptions}
                          isMulti
                          isSearchable
                          closeMenuOnSelect={false}
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>