title: Displaying Data on select option between components on React using graphql
body: <p>So basically im struggling to understand what my next step needs to be. </p>
  
  <ul>
  <li><p>In <strong>productList.js</strong> have a simple select dropdown class component and it displays all data from <code>Products</code> (id, name, brand,vintage) using graphql(apollo) . It works and it displays my data.</p></li>
  <li><p>In <strong>Form.js</strong> I just add the select component to an form. It works.</p></li>
  <li><p>In <strong>DividendRow.js</strong> have a simple Product comment display which just displays all the comments of each Product using graphql(apollo).</p></li>
  <li><p>In <strong>Dividend.js</strong> I add the form with the select and the comments section in one and display both.</p></li>
  </ul>
  
  <p><strong>Outcome:</strong></p>
  
  <p>I would just like to know how would i be able to show the selected option comment? (on{select}Change) This would be based on the id value, so if select product option <code>id</code> value = 1, then display comment where product id = 1. Any any help on this would be much appreciated , been doing some research but cant find any good example how to approach this.</p>
  
  <p>My <strong>.js</strong> files: </p>
  
  <p><strong>ProductList.js</strong></p>
  
  <pre><code>// ProductList.js
  
  import React, { Component } from 'react';
  import { graphql } from "react-apollo";
  import { gql } from "apollo-boost";
  
  const getProductsQuery = gql`
    {
    Products {
          id
          name
          brand
          vintage
      }
    }
  `
  class ProductList extends Component {  
  
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleChange = this.handleChange.bind(this);
     // this.handleSubmit = this.handleSubmit.bind(this);
    }    
  
   handleChange = (event) =&gt; {
      this.setState({ value: event.target.value });
    };
  
  render() {
    const { data: { loading, error, Products, id } } = this.props;
  
     if (loading) {
            return (&lt;div&gt;Loading Product Listing...&lt;/div&gt;);
     }else if(error) {
          return   (&lt;p&gt;Error! Stewart Error!&lt;/p&gt;);       
     }else{
         return (
             &lt;div&gt;       
              &lt;select name="product" value={this.state.value} onChange={this.handleChange} className="custom-select form-control 3" id="listproducts"&gt;
                  {Products.map(({ id, name, brand, vintage }) =&gt; (
                   &lt;option key={id} value={id}&gt;
                    {name} - {brand} - {vintage}  
                    &lt;/option&gt;
                  ))} 
              &lt;/select&gt;
              &lt;/div&gt;
                 );
  
     } 
  }
  }
  export default graphql(getProductsQuery)(ProductList); 
  </code></pre>
  
  <p><strong>Form.js</strong></p>
  
  <pre><code>// Form.js
  
  import React, { Component } from 'react';
  
  import   ProductList   from './ProductList';
  import { ProductAddComment } from './ProductAddComment';
  
  export class Form extends Component {
    render() {
      return (
          &lt;form action="" method="GET" id="product-comments"&gt;
  
        &lt;ProductList/&gt;
  
       // &lt;ProductAddComment/&gt;
  
              &lt;button type="submit" className="btn btn-primary"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>DividendRow.js</strong></p>
  
  <pre><code>// DividendRow.js
  
  import React, { Component } from 'react';
  
  import { graphql } from "react-apollo";
  import { gql } from "apollo-boost";
  
  
  const getProductsCommentsQuery = gql`
  {
    Comments {
      id
      body
      date
      Product {
        complete_name
      }
    }
  }
  `
  
  class DividendRow extends Component {  
  
  render() {
    const { data: { loading, error, Comments } } = this.props;
     if (loading) {
            return (&lt;div&gt;Loading Product Listing...&lt;/div&gt;);
     }else if(error) {
          return   (&lt;p&gt;Error! Stewart Error!&lt;/p&gt;);       
     }else{
         return (
  
  
                  Comments.map(({ id, body, date, Product }) =&gt; (            
                  &lt;div  key={id} id={id} className="contents"&gt;
                      &lt;span className="date"&gt;{date}&lt;/span&gt;
                      &lt;h4 className="product-name"&gt;{Product.complete_name}&lt;/h4&gt;
                      &lt;p className="product-comment"&gt;{body}&lt;/p&gt;
                  &lt;/div&gt; 
                ))
  
                 );
  
     } 
  }
  </code></pre>
  
  <p><strong>Dividend.js</strong></p>
  
  <pre><code>// Dividend.js
  
  import React, { Component } from 'react';
  import DividendRow from './DividendRow';
  
  
  import { Form } from './Form';
  
  export class Dividend extends Component {
  
    render() {
      return (
  
  
  &lt;div className="container"&gt; 
  &lt;div className="row"&gt; 
  &lt;div className="col-lg-12"&gt;
  
      &lt;Form/&gt; 
  
      &lt;h1 className="product"&gt;All Products&lt;/h1&gt;
  
       &lt;DividendRow /&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import ApolloClient from "apollo-boost";
  import gql from "graphql-tag";
  import { ApolloProvider } from "react-apollo";
  //import './index.css';
  import { Dividend } from './Dividend';
  import registerServiceWorker from './registerServiceWorker';
  
  const client = new ApolloClient({
    uri: "https://test.azurewebsites.net/graphql"
  });
  
  function MyDividend() {
    return (
      &lt;ApolloProvider client={client}&gt;
        &lt;Dividend
        /&gt;
      &lt;/ApolloProvider&gt;
    )
  }
  
  ReactDOM.render(&lt;MyDividend  /&gt;, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>