In version 1 of the AEM @adobe/aem-react-editable-components package, a highly common pattern for using the Page component was extending it in the App.js component like below:
import { Page, withModel } from '@adobe/aem-react-editable-components';
import React from 'react';
// This component is the application entry point
class App extends Page {
render() {
return (
<div>
<TestComponent />
{this.childComponents}
{this.childPages}
</div>
);
}
}
export default withModel(App);
However, in V2 of this package, this pattern will throw an error. I am assuming V2 requires the use of composition over inheritance and possibly a functional component. However, I have been unsuccessful in just passing the Page component into App with props, like
const App = (props) => {
return (
<div>
<TestComponent />
<Page {...props} />
</div>
)
}
Adobe has no documentation on this and examples are sparse. How can I successfully convert the V1 pattern of this package to use the V2 version?