Warning: Functions are not valid as a React child, using a conditional rendering
you're setting resultList
to a function when objectList === ""
. either return a <div>
directly, or else use that function as an IIFE:
resultList = (function() {
return (
<div className="item" key={1}>
<p>No results!</p>
</div>
)
})(); // note the parens here, which call the function
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.