1

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?

Dog
  • 2,726
  • 7
  • 29
  • 66

0 Answers0