What is the correct way to "call" a function - written inside a class component - that returns JSX?

Question

I wrote a function that returns some JSX, inside a class component, as follows:

    billingPendingMarker = () => {
        const { classes } = this.props;
        return (
            <svg className={classes.marker} height="50px" width="8px">
                <rect x="0" width="8" height="50" rx="4" fill={color.reds[300]} />
            </svg>
        )
    }

In the main render method of my class component, I "called" this function as if I were writing JSX:

<this.billingPendingMarker />

While this worked without issues locally, on deploying a build to a staging-environment, I got the following error: https://reactjs.org/docs/error-decoder.html/?args%5B%5D=undefined&args%5B%5D=&invariant=130

When I changed <this.billingPendingMarker /> to this.billingPendingMarker() my code worked fine. What I can't figure out is, why does writing the "JSX form" cause the page to crash? Are we not, in effect, creating a functional component encapsulated within our main class component?

My initial suspicion was that something was going wrong while the code is minified during the build process, but I'm not sure.

I do understand that this isn't the best "design" practice, but my doubt is more about the correctness of the syntax.

Appreciate any help I can get in understanding this!

score 2 · Accepted Answer · answered Dec 10 '21 at 06:54

First of all you must now that component need to have a capital letter first to be treated as such by React. Check this post for information :

ReactJS component names must begin with capital letters?

That's probably why your component inside your class component is not rendering. Also you shouldn't have to use this but only <BillingPendingMarker />

As a general note it's rarely advised to create component inside component. It goes against reusability and composability. A functional component inside a class component is acceptable but do not do functional component inside functional components.

Having a function returning some JSX is totally fine on the other hand. It's no issue at all to call {this.billingPendingMarker()} in order to render the desired JSX. But in this case your billingPendingMarker is not considered a React component, just a function that return JSX but without the component "package and functionalities" that comes with.

What is the correct way to "call" a function - written inside a class component - that returns JSX?

1 Answers1