React not rendering function called as HTML

Question

As part of my React app, arrow function ContainerCookiesPolicy calls arrow function LogInTitleTest (and some others).

export default class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    ContainerCookiesPolicy = () => {
        if (window.localStorage.getItem('CookiesAgreed') !== 'true') {
            return (
                <div className='ContainerCookiesPolicy'>
                    <this.LogInTitleTest/>
                    {/*Some other functions*/}
                </div>
            )
        } else {
            return null;
        }
    }

    LogInTitleTest = () => {
        return  (
            <span className='Log_in_title_text'>{'Text'}</span>
        );
    }

render() {
         <this.ContainerCookiesPolicy/>
         {/*Some other functions*/}
    }
}

If I execute this code, this is, function ContainerCookiesPolicy calls function LogInTitleTest, React will not render anything at all (like it does when your function/object returns null) and will give the error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.. However, if instead I copy and paste the content of LogInTitleTest inside ContainerCookiesPolicy like this:

ContainerCookiesPolicy = () => {
        if (window.localStorage.getItem('CookiesAgreed') !== 'true') {
            return (
                <div className='ContainerCookiesPolicy'>
                    <span className='Log_in_title_text'>{'Text'}</span>
                    {/*Some other functions*/}
                </div>
            )
        } else {
            return null;
        }
    }

it will actually render the entire page with the word Text on it.

Further considerations:

1. If my function LogInTitleTest contains <div> instead, it will not render the page either; if the <div> are contained on function ContainerCookiesPolicy, it will render. Same thing if instead of {'Text'} I just have Text.

    LogInTitleTest = () => {
        return  (
            <div className="Log_in_title_container">
                <span className='Log_in_title_text'>{'Text'}</span>
            </div>
        );
    }

2. If I change function LogInTitleTest to return null, the situation will remain exactly the same:

    LogInTitleTest = () => {
        return  null;
    }

3. I'm using AWS Amplify to render the page. On WebStorm on localhost, I did not observe this weird behaviour.

4. I tested the original function LogInTitleTest on another portion of code and it was working as expected. Hence the issue must be with ContainerCookiesPolicy.

Any idea why this is happening? Any help would be appreciated!

Thanks in advance

Answer 1

You shouldn't be referencing the component as <this.LogInTitleTest />. It should be <LogInTitleTest />.

Also be careful of the order you're defining functional components if they're in a single file. As described in this question, arrow functions are evaluated top-down.

    const LogInTitleTest = () => {
        return  (
            <span className='Log_in_title_text'>{'Text'}</span>
        );
    }

    const ContainerCookiesPolicy = () => {
        if (window.localStorage.getItem('CookiesAgreed') !== 'true') {
            return (
                <div className='ContainerCookiesPolicy'>
                    <LogInTitleTest />
                    {/*Some other functions*/}
                </div>
            )
        } else {
            return null;
        }
    }

EDIT: updates based on updated question

Now that you've updated the example it's clear you're using a class component. To render blocks of JSX within a class component you typically call the functions as functions rather than as components.

Also note the render function in your example isn't currently returning anything.

export default class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    renderContainerCookiesPolicy = () => {
        if (window.localStorage.getItem('CookiesAgreed') !== 'true') {
            return (
                <div className='ContainerCookiesPolicy'>
                    {this.renderLogInTitleTest()}
                    {/*Some other functions*/}
                </div>
            )
        } else {
            return null;
        }
    }

    renderLogInTitleTest = () => {
        return  (
            <span className='Log_in_title_text'>Text</span>
        );
    }

    render() {
        return (
           {this.renderContainerCookiesPolicy()}
           {/*Some other functions*/}
        )
    }
}