Functional Components inside class components

Currently I have a class component that contains functions that act as components in my JSX.

Example:

class MyComponent extends React.Component {
    MySubComponent = (props) => {
        if (props.display) {
            return <p>This text is displayed</p>
        }
    }

    render() {
        return (
            <this.MySubComponent display={true} />
        )
    }
}

Are there any repercussions to calling components this way? Also is there a term for this?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This results in creating new MySubComponent function for each MyComponent instance, which is not very efficient way of doing this.

There may be only two benefits of having MySubComponent as MyComponent method.

One of them is that MySubComponent can be replaced with another implementation in MyComponent subclass without modifying render function. This isn’t idiomatic to React because it promotes functional approach instead of OOP.

Another is that MySubComponent can access MyComponent instance and its properties. This results in design problem because two components are tightly coupled.

Neither of these arguments is substantial in React development. Unless there are specific needs that require MySubComponent to be a part of MyComponent, the former shouldn’t be defined as instance method of the latter. It could be just:

const MySubComponent = (props) => {
    if (props.display) {
        return <p>This text is displayed</p>
    }
}

class MyComponent extends React.Component {
    render() {
        return (
            <MySubComponent display={true} />
        )
    }
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x