title: ReactJS - Pass Updated Value To Sub-Component Method
body: <p>I'm working on an environment that is basically set up with a Main Component like this:</p>
  
  <pre><code>class MainComponent extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        selectedValues: []
      };
    }
  
    render() {
      const { selectedValues } = this.state;
      return (
        // Other components
        &lt;SubComponent selectedValues = {selectedValues} /&gt;
        // Other components
      );
    }
  }
  
  export default MainComponent;
  </code></pre>
  
  <p>And a Sub Component like this:</p>
  
  <pre><code>class SubComponent extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        isExporting: false,
        selectedValues: props.selectedValues
      };
    }
  
    performTask = () =&gt; {
      this.setState({ isWorking: true });
      const { selectedValues } = this.state;
      console.log(`Selected Values: ${selectedValues}`);
      fetch('/api/work', {
        method: 'GET'
      })
        .then(res =&gt; res.json())
        .then((result) =&gt; {
           // Handle the result
           this.setState({ isWorking: false });
        })
        .catch((error) =&gt; {
          console.log(error);
          this.setState({ isWorking: false });
        });
    };
  
    render() {
      const { isWorking } = this.state;
      return (
        &lt;Button
          bsStyle="primary"
          disabled={isWorking}
          onClick={() =&gt; this.performTask()}
        &gt;
          {isWorking ? 'Working...' : 'Work'}
        &lt;/Button&gt;
      );
    }
  }
  
  SubComponent.propTypes = {
    selectedValues: PropTypes.arrayOf(PropTypes.string)
  };
  
  SubComponent.defaultProps = {
    selectedValues: []
  };
  
  export default SubComponent;
  </code></pre>
  
  <p>In the Main Component, there are other components at work that can change the <code>selectedValues</code>. The functionality I'd like to see is that when the <code>performTask</code> method fires, it has the most recent and up to date list of <code>selectedValues</code>. With my current setup, <code>selectedValues</code> is always an empty list. No matter how many values actually get selected in the Main Component, the list never seems to change in the Sub Component.</p>
  
  <p>Is there a simple way to do this?</p>