Merge two React applications into one

Question

Im trying to combine two existing React apps. The first one is the regular one, without router, so the index.ts file renders :

ReactDOM.render(
  <App />,
  document.getElementById('root') as HTMLElement
);

the second one is React DnD with router and its index.ts file is :

ReactDOM.render(
  <DndProvider backend={HTML5Backend}>
    <AppStateProvider>
      <App />
    </AppStateProvider>
  </DndProvider>,
  document.getElementById('root')
)

in my App.tsx file i decide what content to render (does user requests the first or the second app), so im not sure how to isolate the provider from app if i don't need it.

Answer 1

You can have the final render to DOM inn App.tsx and create two component, with and without Provider and select the one that you need and render it

index.ts

const AppWithProvider = () => (
   <DndProvider backend={HTML5Backend}>
    <AppStateProvider>
      <App />
    </AppStateProvider>
  </DndProvider>
)
export default AppWithProvider;

App.tsx

import AppWithProvider from '/your/provider/path';
import App from '/your/app/path';
const Comp = yourConditionForProvider? AppWithProvider: App;
ReactDOM.render(
  <Comp />,
  document.getElementById('root') as HTMLElement
);