Displaying Data on select option between components on React using graphql

Question

So basically im struggling to understand what my next step needs to be.

• In productList.js have a simple select dropdown class component and it displays all data from Products (id, name, brand,vintage) using graphql(apollo) . It works and it displays my data.

• In Form.js I just add the select component to an form. It works.

• In DividendRow.js have a simple Product comment display which just displays all the comments of each Product using graphql(apollo).

• In Dividend.js I add the form with the select and the comments section in one and display both.

Outcome:

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 id 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.

My .js files:

ProductList.js

// 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) => {
    this.setState({ value: event.target.value });
  };

render() {
  const { data: { loading, error, Products, id } } = this.props;

   if (loading) {
          return (<div>Loading Product Listing...</div>);
   }else if(error) {
        return   (<p>Error! Stewart Error!</p>);       
   }else{
       return (
           <div>       
            <select name="product" value={this.state.value} onChange={this.handleChange} className="custom-select form-control 3" id="listproducts">
                {Products.map(({ id, name, brand, vintage }) => (
                 <option key={id} value={id}>
                  {name} - {brand} - {vintage}  
                  </option>
                ))} 
            </select>
            </div>
               );

   } 
}
}
export default graphql(getProductsQuery)(ProductList); 

Form.js

// Form.js

import React, { Component } from 'react';

import   ProductList   from './ProductList';
import { ProductAddComment } from './ProductAddComment';

export class Form extends Component {
  render() {
    return (
        <form action="" method="GET" id="product-comments">

      <ProductList/>

     // <ProductAddComment/>

            <button type="submit" className="btn btn-primary">Submit</button>
        </form>
    );
  }
}

DividendRow.js

// 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 (<div>Loading Product Listing...</div>);
   }else if(error) {
        return   (<p>Error! Stewart Error!</p>);       
   }else{
       return (


                Comments.map(({ id, body, date, Product }) => (            
                <div  key={id} id={id} className="contents">
                    <span className="date">{date}</span>
                    <h4 className="product-name">{Product.complete_name}</h4>
                    <p className="product-comment">{body}</p>
                </div> 
              ))

               );

   } 
}

Dividend.js

// Dividend.js

import React, { Component } from 'react';
import DividendRow from './DividendRow';


import { Form } from './Form';

export class Dividend extends Component {

  render() {
    return (


<div className="container"> 
<div className="row"> 
<div className="col-lg-12">

    <Form/> 

    <h1 className="product">All Products</h1>

     <DividendRow />

</div>
</div>
</div>
    );
  }
}

index.js

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 (
    <ApolloProvider client={client}>
      <Dividend
      />
    </ApolloProvider>
  )
}

ReactDOM.render(<MyDividend  />, document.getElementById('root'));
registerServiceWorker();

Answer 1

Here ProductList.js and DividendRow.js need to communicate So a function can be defined in Dividend.js and be passed to ProductList.js and selected productId can be known and can be passed to DividendRow.js and there it can be passed to query to get the product comments:

ProductList.js:

    // 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);
        this.handleClick = this.handleClick.bind(this)
      }    

     handleChange = (event) => {
        this.setState({ value: event.target.value });
      };

     handleClick(id) {
        this.props.selectId(id);
       } 

    render() {
      const { data: { loading, error, Products, id } } = this.props;

       if (loading) {
              return (<div>Loading Product Listing...</div>);
       }else if(error) {
            return   (<p>Error! Stewart Error!</p>);       
       }else{
           return (
               <div>       
                <select name="product" value={this.state.value} onChange={this.handleChange} className="custom-select form-control 3" id="listproducts">
                    {Products.map(({ id, name, brand, vintage }) => (
                     <option key={id} value={id} onClick={()=>this.handleClick(id)}>
                      {name} - {brand} - {vintage}  
                      </option>
                    ))} 
                </select>
                </div>
                   );

       } 
    }
    }
    export default graphql(getProductsQuery)(ProductList); 

Form.js

    // Form.js

import React, { Component } from 'react';

import   ProductList   from './ProductList';
import { ProductAddComment } from './ProductAddComment';

export class Form extends Component {
  render() {
    return (
        <form action="" method="GET" id="product-comments">

      <ProductList selectId={this.props.selectId}/>

     // <ProductAddComment/>

            <button type="submit" className="btn btn-primary">Submit</button>
        </form>
    );
  }
}

DividendRow.js

        // DividendRow.js

    import React, { Component } from 'react';

    import { graphql } from "react-apollo";
    import { gql } from "apollo-boost";


    const getProductsCommentsQuery = gql`
    query($id: ID){
      Comments(id: $id){
        id
        body
        date
        Product {
          complete_name
        }
      }
    }
    `

    class DividendRow extends Component {  

    render() {
      const { data: { loading, error, Comments } } = this.props;
       if (loading) {
              return (<div>Loading Product Listing...</div>);
       }else if(error) {
            return   (<p>Error! Stewart Error!</p>);       
       }else{
           return (


                    Comments.map(({ id, body, date, Product }) => (            
                    <div  key={id} id={id} className="contents">
                        <span className="date">{date}</span>
                        <h4 className="product-name">{Product.complete_name}</h4>
                        <p className="product-comment">{body}</p>
                    </div> 
                  ))

                   );

       } 
    }
   export default graphql(getProductsCommentsQuery,{
  options:(props)=>{
    return {
      variables: {
        id: props.productId,
      }
    }
  }
})(DividendRow);

Dividend.js

    // Dividend.js

import React, { Component } from 'react';
import DividendRow from './DividendRow';


import { Form } from './Form';

export class Dividend extends Component {
  state = {
    productId: null,
     }
  selectId=(id)=>{
    this.setState({productId: id});
   }
  render() {
    return (


<div className="container"> 
<div className="row"> 
<div className="col-lg-12">

    <Form selectId={this.selectId} /> 

    <h1 className="product">All Products</h1>

     <DividendRow productId ={this.state.productId} />

</div>
</div>
</div>
    );
  }
}