Nested editor components

Is your feature request related to a problem? Please describe. I have been trying to create a page editor, and everything has been great so far, except for allowing the user to customize the header in the same UI as any other page. The header UI loads successfully but no changes are possible as such.

Describe the solution you’d like Any way to nest <Editor/>, or <Frame data={} /> to allow for dynamic rendering of subcomponents such as header/footer

Additional context Here is my current implementation : <Editor resolver={Resolvers} > <Grid celled className='full-height admin-panel'> <GridColumn className='sideMenu' width='13'> <Fade transitionDuration={transition} show={menuJsonData}> <Editor enabled={true} resolver={Resolvers}> <Frame data={menuJsonData}> <Element is={Container} className='full-height flex-cont' canvas> <div className='full-height red'> <Header as='h2' icon> <Icon name='add circle' /> <HeaderContent>Add content here</HeaderContent> </Header> <div> </div> </div> </Element> </Frame> </Editor> </Fade> <Frame> <Element is={Container} className='full-height flex-cont' canvas> <div className='full-height red'> <Header as='h2' icon> <Icon name='add circle' /> <HeaderContent>Add content here</HeaderContent> </Header> <div> </div> </div> </Element> </Frame> </GridColumn> <GridColumn className='sideMenu' width='3'> <SettingsPanel></SettingsPanel> <Toolbox slug={slug}></Toolbox> </GridColumn> </Grid> </Editor>

[hugominas]

Yap that’s how we handle it. We have global application state using one of the mentioned options and each component updates itself when this changes. So you can fetch the data on page load from an endpoint, update the global state without the need to pass things down the component tree. react-hooks-global-state is a good starting point! hope it works out for you

[pepas24]

@hugominas Yes, I understand that is out of the scope of Craft.js but can you point me out with an example or some reference on how to solve this kind of problems? I mean, the Header component in the last example expect some props, but if that props are in the serialized state of Craft I can’t pass down to it because the state was loaded from <Frame data={data} />. I was trying to fetch the categories from the component itself but feels like an antipatern. I’m new on React so I don’t use Redux but I will take a look at react-hooks-global-state as you mention. Thanks