Error when passing a function in the React data

user_10184382 0
Viewed 34

I am trying to pass a function on the sectionOne, then call sectionOne from another component but I am getting an error.

Error: 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.

import React from 'react';
import {Home} from './home';

export const appTabBar = {
    sectionOne: function sectionOne() {
        return (
            <>
                <Home />
            </>
        );
    },
};

import React from 'react';
import PropTypes from 'prop-types';

export const DrawerSection = props => {
    const {sectionOne} = props;
    return (
        <>
            <div>{sectionOne}</div>
        </>
    );
};
DrawerSection.propTypes = {
    sectionOne: PropTypes.any,
};
rxjs material-ui reactjs javascript
1 Answers

You want to render sectionOne as a React component, and user-defined components must be capitalized. You can either rename sectionOne in the file where it is declared or assign it to a variable in the file where it is used:

export const DrawerSection = props => {
    const {sectionOne: SectionOne} = props;
    return (
        <>
            <div><SectionOne /></div>
        </>
    );
};
user_3686970
Related