title: How to pass state from a stateful component to another stateful component
body: <p>I am making an app that will generate a dinner suggestion to users. I successfully fetch the data and output it. But I am very stuck with the filter.</p>
  
  <p>My idea of this assignment is to create a Filter that users can select a cuisine, and then get a dinner suggestion. I am using the Zomato API to get the resutuanrt data. I need to pass the </p>
  
  <p>I have no idea how to pass the cuisine_id from my <code>CusisineOption</code> component to my <code>FoodGuide</code> component. I need to pass the cuisine_id from my <code>CusisineOption</code> component (I get the id from Zomato as well) to my <code>FoodGuide</code> component. And then use the cuisine_id to get the JSON file.</p>
  
  <p>I will be very appreciated if anyone can help and give me some suggestions. This is my code:</p>
  
  <p>CusisineOption component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  import Aux from '../../hoc/Aux/Aux';
  
  class Cuisines extends Component {
    state = {
      error: false,
      optionList: [],
      value: null
    }
    componentDidMount() {
        const config = { headers: {'user-key': 'myAPIkey'} };s
        axios.get(`https://developers.zomato.com/api/v2.1/cuisines?city_id=2891` , config) 
            .then(res =&gt; {
                this.setState({optionList: res.data.cuisines})
                console.log(this.state.optionList)
            })
            .catch(error =&gt; {
                this.setState({error: true})
            })
    }
  
      gotOption = (event) =&gt; {
        this.setState({value: event.target.value})
        console.log(this.state.value)
    }
  
      render() {
        const CuisinesCopy = [...this.state.optionList]
        const cuisineItems = CuisinesCopy.map((item) =&gt; {
          return(
              &lt;option key={item.cuisine.cuisine_id.toString()} value={ item.cuisine.cuisine_id }&gt;{item.cuisine.cuisine_name}&lt;/option&gt;
          )
        })
  
  
  
        return (
          &lt;Aux&gt;
            &lt;p&gt;Goddamnit! I am going to get the json data&lt;/p&gt;
  
            &lt;select value={this.state.value} onChange={this.gotOption}&gt;
                &lt;option value="1"&gt;--Please select a cusion--&lt;/option&gt;
                &lt;option value="2"&gt;--Please select a cusion 2--&lt;/option&gt;
                { cuisineItems }
            &lt;/select&gt;
          &lt;/Aux&gt;
  
          )
      }
    }
  
    export default Cuisines;
  </code></pre>
  
  <p><code>FoodGuide</code> component: 
  Value is the value I wanna update using cuisine_id</p>
  
  <pre><code>class FoodGuide extends Component {
      state = {
          names: [],
          suggestion: null,
          getList: false,
          loading: false,
          error: false,
          changed: false,
          value: "2",
          list: []
      }
  
  componentDidMount() {
      const config = { headers: {'user-key': 'APIKEY'} };
      axios.get(`/search?entity_id=2891&amp;entity_type=city&amp;count=50&amp;sort=rating$&amp;cuisines=${this.props.value}` , config) 
          .then(res =&gt; {
              this.setState({names: res.data.restaurants})
              console.log(this.state.names)
          })
          .catch(error =&gt; {
              this.setState({error: true})
          })
  }
  
  
  getSuggestion = () =&gt; { 
      let rSuggestion;
      if(this.state.names) {
          let randomR = this.state.names[Math.floor(Math.random()*this.state.names.length)];
          rSuggestion = randomR.restaurant.name
          //console.log(randomR.restaurant.name)
          this.setState({suggestion: rSuggestion})
      } 
      return rSuggestion
  }
  
  getRestaurantList = () =&gt; {
      let rData = &lt;p&gt;This is a suggestion&lt;/p&gt;
      if(this.state.getList) {
          rData = this.state.names.map((r, i) =&gt; {
              return(
                  &lt;li key={i}&gt;
                      &lt;span&gt;Name: { r.restaurant.name }&lt;/span&gt;
                  &lt;/li&gt;
              )
          }) 
  
      }
      return rData
  }
  
  getRestaurantsHandler = () =&gt; {
      let rList = &lt;p&gt;Loading...&lt;/p&gt;
      if(this.state.names) {
          this.setState({getList: true})
      }
      return rList
  }
  
  render () {
  
      return (
          &lt;Aux&gt;
              &lt;h2&gt;Food Guide&lt;/h2&gt;
              &lt;Cuisines /&gt;
              &lt;Suggestion suggested={ this.getSuggestion } suggestion={this.state.suggestion}/&gt;
              &lt;RestaurantList getList={ this.getRestaurantsHandler } rList={ this.getRestaurantList() }/&gt;
          &lt;/Aux&gt;
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <p>export default FoodGuide;</p>