Why am I getting Warning: Functions are not valid as a React child?

I think i should share my experience about this error, my code:

const PageMakeup = loading ? ThemLoading : (
<div>....</div>
);

The problem here is ThemLoading is include in other file, should be <ThemLoading />; And this error is cleared!

About your error: Callback function and return function is diffirent, in your case is the return funtion this.renderAlbums();, not this.renderAlbums;

Good day!


this.renderAlbums refers to the actual function itself, whereas this.renderAlbums() actually executes the function and thus represents the function's return value.


Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render

Basically,React expecting the React Elements to render it.

In current script,this.renderAlbums is a function reference which not returning any React Element.Function itself not react element.So,React unable to render the this.renderAlbums.

<View>
   { this.renderAlbums }
</View>

correct way:

<View>
   { this.renderAlbums() } //it will return react element which can be rendered.
</View>