title: Change image in component based on dropdown value in another component using React
body: <p>I am new to React. I have three components: a top-level App.js component which renders a ProductOptions.js component and a ProductImage.js component. I'd like to change the image displayed in the ProductImage component based on the value of the dropdown in the ProductOptions component. When App renders the first time, the default selection is Black and the corresponding product-black.jpg image will show in the ProductImage component. The user can switch to Brown which should show the product-brown.jpg image in the ProductImage component. </p>
  
  <p>I know I need to update state and use an onChange event to listen for the value of the dropdown but I'm unsure of how to wire it all together.</p>
  
  <p>App component:</p>
  
  <pre><code>import React from 'react';
  import ProductOptions from './ProductOptions';
  import ProductImage from './ProductImage';
  
  class App extends React.Component {
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-8"&gt;
             &lt;ProductOptions /&gt;
            &lt;/div&gt;
            &lt;div className="col-4"&gt;
             &lt;ProductImage /&gt;
            &lt;/div&gt;
           &lt;/div&gt;
         &lt;/div&gt;
        );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>ProductOptions component:</p>
  
  <pre><code>import React from 'react';
  
  class ProductOptions extends React.Component {
    render() {
      return (
      &lt;div id="product-options"&gt;
          &lt;form&gt;
              &lt;label for="colors"&gt;Colors&lt;/label&gt;
              &lt;select className="form-control form-control-sm" id="colors" name="colors"&gt;
                  &lt;option value="Black"&gt;Black&lt;/option&gt;
                  &lt;option value="Brown"&gt;Brown&lt;/option&gt;
              &lt;/select&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      );
    }
  }
  
  export default ProductOptions;
  </code></pre>
  
  <p>ProductImage component:</p>
  
  <pre><code>import React from 'react';
  import productBlack from '../images/product-black.jpg';
  import productBrown from '../images/product-brown.jpg';
  
  class ProductImage extends React.Component {
    render() {
      return (
      &lt;div id="product-image"&gt;
        &lt;img
          alt="tempalt"
          className="img-fluid"
          src={tempsource}
        /&gt;
      &lt;/div&gt;
     );
    }
  }
  
  export default ProductImage;
  </code></pre>