title: ReactJS : How to properly handle data fetched from food2fork API?
body: <p>I have an app built with ReactJS. Its purpose is to display recipes, searched in food2fork API. 
  I have no problems with updating state of parent component. Data is fetched after clicking 'search' button in app.
  My issue is related with sending fetched data as props to child component and properly displaying received recipes based on current search.</p>
  
  <hr>
  
  <p>handleChange is only for handling input.</p>
  
  <p>handleSearch is what I wanted to use 'onClick' of a button to display data fetched from API.</p>
  
  <p>Fetched recipes should be displayed in Results component.</p>
  
  <p>Hope it is clear :)</p>
  
  <hr>
  
  <p>Besides only passing state as props from Parent component and using it in Child component, I also tried to update Child state based on received props with lifecycle methods - maybe I haven't used them corrently ...</p>
  
  <p>Parent component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Results from './Results';
  
  class Recipes extends Component {
      constructor(props){
          super(props);
          this.state = {
              search: '',
              recipes: []
          }
      }
      handleChange=e=&gt;{
          this.setState({
              search: e.target.value
          })
      }
  
  
      handleSearch =()=&gt;{
              if(this.state.search !== ''){
                  const url = `https://www.food2fork.com/api/search?key=367d2d744696f9edff53ec5b33a1ce64&amp;q=${this.state.search}`
  
                  fetch(url)
                          .then(data =&gt; data.json())
                          .then(jsonData =&gt; {
                              this.setState((jsonData)=&gt; {return {
                                  recipes: jsonData}
                              })
                          })
  
              } else {
                  console.log('empty')
              }
      }
  
      render() {
          return (
              &lt;Wrapper&gt;
                  &lt;SearchBar 
                      value={this.state.search} 
                      type='search' 
                      onChange={this.handleChange}&gt;
                  &lt;/SearchBar&gt;
                  &lt;SearchButton onClick={this.handleSearch}&gt;SEARCH&lt;/SearchButton&gt;
  
                  &lt;Results recipes={this.state.search}/&gt;
  
              &lt;/Wrapper&gt;
          );
      }
  }
  
  export default Recipes;
  </code></pre>
  
  <p>CHILD COMPONENT 'Results' which should receive updated recipe list as props and display these recipes.</p>
  
  <pre><code>import React from 'react';
  import Recipe from './Recipe';
  
  class Results extends React.Component {
      render(){
          return (
              &lt;Container&gt;
                  &lt;RecipesList&gt;
                      {this.props.recipes.map(item =&gt; 
                              &lt;Recipe 
                                  f2fURL={item.f2f_url}
                                  image={item.image_url}
                                  publisher={item.publisher}
                                  publisherURL={item.publisher_url}
                                  recipeID={item.recipe_id}
                                  source={item.source_url}
                                  title={item.title}
                              /&gt;)}
                  &lt;/RecipesList&gt;
              &lt;/Container&gt;
          );
      }
  };
  </code></pre>