title: Warning: Functions are not valid as a React child, using a conditional rendering
body: <p><br/>
  I'm trying to display the list of results taken from the response of wikipedia API.
  If the response doesn't show any list, it should show a different message. I am trying to do a conditional rendering.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>getData(e) {
          e.preventDefault();
          var search = e.target.search.value;
          var wikipediaEndPoint = "https://en.wikipedia.org/w/api.php?format=json&amp;origin=*&amp;action=query&amp;generator=search&amp;gsrnamespace=0&amp;prop=pageimages|extracts&amp;pilimit=max&amp;exintro&amp;explaintext&amp;exsentences=1&amp;exlimit=max&amp;gsrsearch="+search;
          var wikipediaUrl = "https://en.wikipedia.org/?curid=";
  
          fetch(wikipediaEndPoint)
          .then(data =&gt; {
              return data.json();
          }).then(data =&gt; {
              var objectList = (data.hasOwnProperty("query")) ? data.query.pages : "";
              let resultList;
  
              if(objectList !== ""){
                  resultList = Object.keys(objectList).map(function(key, index) {
                      return (
                          &lt;div className="item" key={objectList[key].pageid}&gt;
                              &lt;a href={wikipediaUrl+objectList[key].pageid}&gt;
                                  &lt;h1&gt;{objectList[key].title}&lt;/h1&gt;
                                  &lt;p&gt;{objectList[key].extract}&lt;/p&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      )
                  });
              } else {
                  resultList = (function() {
                      return (
                          &lt;div className="item" key={1}&gt;
                              &lt;p&gt;No results!&lt;/p&gt;
                          &lt;/div&gt;
                      )
                  });
              }
  
              this.setState({search: resultList});
          })
      }
  </code></pre>
  
  <p>The result is shown here: <code>&lt;div className="items"&gt;{this.state.search}&lt;/div&gt;</code></p>
  
  <p>It works fine when the search field keyword finds some results, however, on the opposite case the console returns an error (or a warning): </p>
  
  <blockquote>
    <p><code>Warning: Functions are not valid as a React child. This may happen if</code>
    <code>you return a Component instead of &lt;Component /&gt; from render. Or maybe</code>
    <code>you meant to call this function rather than return it.</code></p>
  </blockquote>
  
  <p>Where is the error? Am I doing the conditional rendering the right way? <br/></p>
  
  <p>Thanks</p>