title: How to setState to answer from APi and use map
body: <p>Im trying to create recipes searcher. In <strong>App.js</strong> I receive query from search input from another component and I want to <code>setState</code> to answer from APi. <code>Console.log</code> from  callback in <code>setState</code> shows updated state but the state is not updated. I need <code>setState</code> updaed so I can use <code>map</code> on it and display list of recipes in <code>render</code>. It gives me error map is not a function because <code>this.state.recipesList</code> is still empty. Anyone can help me ?</p>
  
  <pre><code>class App extends Component {
    state = {
      query: "",
      recipesList: []
    };
  
    getQuery = query =&gt; {
      const key = "2889f0d3f51281eea62fa6726e16991e";
      const URL = `https://www.food2fork.com/api/search?key=${key}&amp;q=${query}`;
  
      fetch(URL)
        .then(res =&gt; res.json())
        .then(res =&gt; {
          this.setState(
            {
              recipesList: res
            },
            () =&gt; {
              console.log(this.state.recipesList);
            }
          );
        });
      console.log(this.state.recipesList);
    };
    render() {
       const test = this.state.recipesList.map(item =&gt; {
         return (
           &lt;div className="recispesList"&gt;
             &lt;h1&gt;{item.title}&lt;/h1&gt;
          &lt;/div&gt;
         );
       });
  
      return (
        &lt;div className="App"&gt;
          &lt;Search query={this.getQuery} /&gt;
          &lt;div className="contentWrapper"&gt;{}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Search component: </p>
  
  <pre><code>class Search extends Component {
    state = {
      searchValue: ""
    };
  
    handleChange = val =&gt; {
      let searchValue = val.target.value;
      this.setState({
        searchValue
      });
    };
    handleSubmit = e =&gt; {
      e.preventDefault();
      this.setState({
        searchValue: ""
      });
      this.props.query(this.state.searchValue);
    };
    render() {
      return (
        &lt;div className="searchWrapper"&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;input onChange={this.handleChange} value={this.state.searchValue} /&gt;
            &lt;button /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Search;
  </code></pre>