How could I use a class component inside function component

Question

We can use function component inside a class component, is it possible to do the other way around? For example

class MyClassComponent extends React.Component {
    render() {
        return (
            <p>This is a class component with display {this.props.display}</p>
        )
    }
}
const MyFunctionComponent = (props) => {
    return <MyClassComponent display=props.shouldDisplay>This is a function component</MyClassComponent >
}

GalAbra · Accepted Answer · 2020-04-18 05:07:38Z

3

React makes it transparent for you whether the components you use are functions or classes, so you can compose them as you like.

Specifically in your code there are two issues that you might want to reconsider:

When you define a prop, its value should be wrapped in curly brackets:

<MyClassComponent display={props.shouldDisplay}>

Components can be either self-closing or have children props. In your case, you've added text inside the opening tag and the closing tag, which you can access in MyClassComponent via this.props.children:

const ChildComponent = (props) => {
    return (
        <div>
            {this.props.children}
        </div>
    );
}

const ParentComponent = (props) => {
    return (
        <ChildComponent>
            Hello World
        </ChildComponent>
    );
}

const App = (props) => {
    return <ParentComponent/>;
}

edited Apr 18, 2020 at 5:07

answered Apr 18, 2020 at 5:02

GalAbra

5,1585 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How could I use a class component inside function component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related