title: In React when in onChange function how to update another custom component's state and pass a value in?
body: <p>In a React app currently there is a drop down list that has an onChange event that calls a function. In that function (when the users selects a different choice in the ddl) what I would like to achive is to update another custom component &amp; pass a value into that component.</p>
  <p>So in the front end there is a simple drop down:</p>
  <pre><code>    &lt;Dropdown
          value={selectedOption}
          options={dropDownOptions}
          onChange={onChange}
        /&gt;
  </code></pre>
  <p>Then there is an onChange function that gets fired when the drop down gets selected:</p>
  <pre><code> const onChange = React.useCallback(
      e =&gt; {
        const optionId = e.target.value;
        const optionData = keyedOptions[optionId];
  
        // refresh DownloadSelector custom component
        // something like this which doesn't work {optionData.id &amp;&amp; &lt;DownloadSelector eventId={optionData.id} /&gt;} }
  
  </code></pre>
  <p>Also I am able to import the custom component at the top of the file normally such as:</p>
  <pre><code>import { DownloadSelector } from '../../../SearchAndSort/DownloadSelector';
  </code></pre>
  <p>The custom component when defining it has a value passed in like so:</p>
  <pre><code>export const DownloadSelector = ({eventId}) =&gt; {
  </code></pre>
  <p>If the whole page refreshes the custom <code>DownloadSelector</code> component will get uploaded. I would like that to happen in the onChange.</p>
  <p>How in the onChange function can we update/reload/setState/refresh the <code>DownloadSelector</code> component?</p>