Warning: Functions are not valid as a React child

Question

I can't figure out why I'm getting the following error... any help would be much appreciated!

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

Here is my code:

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import ContentTable from './ContentTableBuilder';

import {
    setCurrentContentPage,
    setCurrentContent,
    clearContentsAfterPage,
    fetchLicensedContents
} from '../../../../actions/library';

export default () => {

    class SchoolContentList extends React.Component {

        render() {
            const {
                activeInstitution,
                contentType,
                role,
                contentPages,
                fetchLicensedContents,
                setCurrentContentPage,
                setCurrentContent,
                clearContentsAfterPage,
            } = this.props;
            return (
                <div className="contentBox">
                    {/* Main Content Table */}
                    <ContentTable {...{
                        recordPages: contentPages,
                        fetchRecords: (...args) => fetchLicensedContents(contentType, role, activeInstitution.id, ...args),
                        setCurrentRecordPage: setCurrentContentPage,
                        setCurrentRecord: setCurrentContent,
                        clearRecordsAfterPage: clearContentsAfterPage,
                    }} />
                </div>
            );
        }
    }

SchoolContentList.propTypes = {
    role: PropTypes.string.isRequired,
    activeInstitution: PropTypes.shape({
        id: PropTypes.number,
    }).isRequired,
    contentPages: PropTypes.object.isRequired,
    fetchLicensedContents: PropTypes.func.isRequired,
    setCurrentContentPage: PropTypes.func.isRequired,
    setCurrentContent: PropTypes.func.isRequired,
    clearContentsAfterPage: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => {
    const auth = state.auth;
    return {
        role: auth.user.role,
        activeInstitution: auth.institutions.active || {},
        contentPages: state.library.contentPages,
    };
};

const mapDispatchToProps = (dispatch) => ({
    fetchLicensedContents: (contentType, q, page, perPage, sortOpts, extraFilters) => (
        dispatch(fetchLicensedContents(contentType, q, page, perPage, sortOpts, extraFilters))
    ),
    setCurrentContentPage: (page) => dispatch(setCurrentContentPage(page)),
    setCurrentContent: (contentId, data) => dispatch(setCurrentContent(contentId, data)),
    clearContentsAfterPage: (page) => dispatch(clearContentsAfterPage(page)),
});

return connect(
    mapStateToProps,
    mapDispatchToProps
)(SchoolContentList);
};

This problem could possibly come from one of your imported components. Please make sure your components are created as specified in the react doc. — The Oracle

Barazu Barazu · Accepted Answer · 2018-05-25T23:41:28

Well, as the warning says - you can't export a function and then use it as a component (which I guess you do someplace). Export the component instead (drop the arrow function at the beginning)

Warning: Functions are not valid as a React child

1 Answers