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

Share Improve this question Follow asked Apr 18, 2020 at 4:51 DrexDrex 3,8711010 gold badges4646 silver badges7777 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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