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!
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.