Warning: Functions are not valid as a React child, using a conditional rendering

Question

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.

Here is the code:

getData(e) {         e.preventDefault();         var search = e.target.search.value;         var wikipediaEndPoint = "https://en.wikipedia.org/w/api.php?format=json&origin=*&action=query&generator=search&gsrnamespace=0&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch="+search;         var wikipediaUrl = "https://en.wikipedia.org/?curid=";          fetch(wikipediaEndPoint)         .then(data => {             return data.json();         }).then(data => {             var objectList = (data.hasOwnProperty("query")) ? data.query.pages : "";             let resultList;              if(objectList !== ""){                 resultList = Object.keys(objectList).map(function(key, index) {                     return (                         <div className="item" key={objectList[key].pageid}>                             <a href={wikipediaUrl+objectList[key].pageid}>                                 <h1>{objectList[key].title}</h1>                                 <p>{objectList[key].extract}</p>                             </a>                         </div>                     )                 });             } else {                 resultList = (function() {                     return (                         <div className="item" key={1}>                             <p>No results!</p>                         </div>                     )                 });             }              this.setState({search: resultList});         })     } 

The result is shown here: <div className="items">{this.state.search}</div>

It works fine when the search field keyword finds some results, however, on the opposite case the console returns an error (or a warning):

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Where is the error? Am I doing the conditional rendering the right way?

Thanks

Answer 1

            resultList = (function() {                 return (                     <div className="item" key={1}>                         <p>No results!</p>                     </div>                 )             }); 

Why are you setting a function? Just set the <div... -

            resultList = (                     <div className="item">                         <p>No results!</p>                     </div>                 ) 

Edit -

In order to really use a function (not sure why, though), the code would have to be a bit different -

            const Foo = (function() {                 return (                     <div className="item" key={1}>                         <p>No results!</p>                     </div>                 )             });             resultList = (<Foo />) 

Edit 2 -

The above edit works because React components do not have to be constructors/classes, they can also be a simple function that gets props as a parameter and returns JSX. I think this type of components is a bit limited, but it works.