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?

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?

• javascript
• reactjs
• components
• this
• react-props

• 1 There would only be a benefit for this if you are using this inside of that functional component. Otherwise there is not need to dynamically create it. Note that because you are using the property initializer syntax your functional component will be recreated for every instance of the class based component. – trixn Commented Dec 6, 2018 at 18:00
• What was the reasoning for this? If there's none, you're writing more complex code than you could. – Estus Flask Commented Dec 6, 2018 at 18:00
• @estus I would like the render function to remain declarative. So I've moved all render logic to functions to avoid having them inside the render function itself. I know I could easily call the function like this {this.mySubComponent()} but imo keeping it as JSX makes it easier to read. – CodingMadeEasy Commented Dec 6, 2018 at 18:04
• I see. At this point MySubComponent doesn't need to be a part of MyComponent, according to KISS principle. Components can be used and tested separately. – Estus Flask Commented Dec 6, 2018 at 18:12
• @estus I would usually agree, but this component is only going to be used by this class. It really is just a class function, it's just how it's being displayed which is in dispute. – CodingMadeEasy Commented Dec 6, 2018 at 18:14

1 Answer 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} />
        )
    }
}