title: How do I update state of a functional component from a class component in order to display items from a map in react
body: <p>I have a StoreDetails functional componenet in Gatsby JS, it is rendering products conditionally from a map in graphQL that match the state value using UseState hook. I have a class component drop down menu that currently manually is populated with sku'ids that would match the condition to display in the state and map conditional statement. I want the dropdown to change the state of the functional component so the right product shows when it is selected in the drop down. I was playing around with passing the state function as a prop, but I got rerender issues, quite stuck here.</p>
  
  <p>The key is at this line <code>{value.skuId === sku.skuId ?</code> How do I change that based on the option dropdown when it's still inside the map</p>
  
  <p>thanks ahead of time</p>
  
  <p>Here is my code so far</p>
  
  <pre><code>
  import React, {useState} from 'react';
  import Layout from "../components/layout"
  import styled from 'styled-components';
  import {loadStripe} from '@stripe/stripe-js';
  // import Alert from '../components/Alert';
  import { navigate } from "gatsby";
  import Img from "gatsby-image"
  
  
  
  
  
  const StoreHero = styled.section`
      width:1280px;
      margin:0 auto;
  `
  
  class Alert extends React.Component{
      constructor(props){
          super(props);
  
          //console.log(props);
  
          this.state = {test:"test",hello:"hello1",hash:props.hash}
      }
      render(){
          const { test, hello, hash } = this.state
  
          //console.log(hash);
  
          return(
              &lt;div&gt;{hash}&lt;/div&gt;
          )
      }
  }
  
  
  class ShowItem extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: 'coconut'};
  
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
      console.log(event.target.value);
  
      // Right here is where I want to change the state of the value variable below so
      // that the correct product is shown based on the dropdown sku selection
  
    }
  
  
    render() {
  
  
      return (
  
            &lt;select value={this.state.value} onChange={this.handleChange}&gt;
              &lt;option value="sku_HAD1kUsbV3GpgW"&gt;sku_HAD1kUsbV3GpgW&lt;/option&gt;
              &lt;option value="sku_HACMgLjJBZFR7A"&gt;sku_HACMgLjJBZFR7A&lt;/option&gt;
            &lt;/select&gt;
  
  
      );
    }
  }
  
  class Product extends React.Component{
  
      constructor(props) {
          super(props);
  
          this.state = {
            stripe: null
          };
  
                  this.loadStripeLib = this.loadStripeLib.bind(this);
                  this.handleSubmit = this.handleSubmit.bind(this);
        }
  
        componentDidMount() {
          this.loadStripeLib()
        }
  
        async loadStripeLib() {
          try {
            const stripe = await loadStripe('pk_test_random');
            this.setState({ stripe });
          } catch {
            // do nothing
          }
        }
  
        handleSubmit(sku, productId){
            return event =&gt; {
                event.preventDefault();
                this.state.stripe.redirectToCheckout({
                  items: [{sku, quantity: 1}],
                  successUrl: `http://localhost:8000/store/${productId}#success`,
                  cancelUrl: `http://localhost:8000/store/${productId}#cancelled`,
                }).then(function (result) {
                  // Display result.error.message to your customer
                  console.error(result);
                });
            }
              }
  
  
        render(){
                      const { id, currency, price, name, productId } = this.props
  
                      const priceFloat = (price / 100).toFixed(2)
                      const formattedPrice = Intl.NumberFormat('en-US', {
                      style: 'currency',
                      currency,
                      }).format(priceFloat)
  
            return(
                &lt;form onSubmit={this.handleSubmit(id, productId)}&gt;
                                  &lt;h2&gt;
                                      {name} ({formattedPrice})
                                  &lt;/h2&gt;
                  &lt;button type="submit"&gt;Buy Now&lt;/button&gt;
  
                &lt;/form&gt;
            )
        }
  
  }
  
  const StoreDetails = ({data, location}) =&gt;{
  
    const [value, setValue] = useState({
      skuId: "sku_HAD1kUsbV3GpgW"
    });
  
  
  
      //console.log(value);
  
  
  
      return(
          &lt;Layout&gt;
              &lt;StoreHero&gt;
                          &lt;Alert test="test" hello="hello" hash={location.hash}/&gt;
  
              {/* &lt;ShowItem props={data}/&gt; */}                                    
  
                {data.allDatoCmsStore.edges.map(({ node: sku }) =&gt; (
                  &lt;&gt;
                  {value.skuId === sku.skuId ?
                    &lt;&gt;
                      &lt;ShowItem setValue={setValue}/&gt;
                      &lt;Product
                        key={sku.id}
                        id={sku.skuId}
                        productId={sku.productId}
                        currency="cad"
                        price={sku.price}
                        name={sku.title}
                      /&gt;
                      &lt;Img fixed={sku.image.fixed}/&gt;
                    &lt;/&gt;
                  :
                    null
                  }
  
                  &lt;/&gt;
                ))}
  
              &lt;/StoreHero&gt;
          &lt;/Layout&gt;
      )
  
  }
  
  export default StoreDetails
  
  export const query = graphql`
    query StoreDeatailsQuery($slug: String!)  {
      allDatoCmsStore(filter: {productId: {eq: $slug}}) {
        edges {
          node {
            price
            productId
            skuId
            title
            id
            image{
              fixed{
                ...GatsbyDatoCmsFixed
              }
            }
          }
        }
      }
      allStripeSku {
          edges {
            node {
              id
              currency
              price
              attributes {
                name
              }
              image
              localFiles {
                childImageSharp {
                  fixed(width: 125) {
                    ...GatsbyImageSharpFixed
                  }
                }
              }
            }
          }
        }
    }
  `
  </code></pre>