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

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

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

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

• javascript
• reactjs
• react-hooks

1 Answer 1

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

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

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

<MyClassComponent display={props.shouldDisplay}>

2. 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/>;
}