CODEWITHSUNDEEP
reactjs
user2914171
user2914171

Reputation: 85

System to manage reactjs applications

I get how to specify where to render the reactjs application by using the render method and specifying the html tag where it should be rendered.

What I do not understand is how you can have a list of react.js applications that is dynamically loaded into that same HTML tag.

For example there is a sidebar which is dynamically created to give a user a list of N number of react.js applications. When the user clicks on one of the links it loads that application into the HTML tag (div or whatever) container on the right.

I am sure this may be something easy but have been struggling with this concept for awhile. Would appreciate any inputs anyone has on this.

Upvotes: 1

Views: 29

Answers (1)

Alex Wayne
Alex Wayne

Reputation: 187024

If you truly had multiple full apps you wanted to swap out, you'd have to manually mount and unmount them. Something like a function like this, that unmounts the previous app, then mounts a new one. Example

function swapApp(App) {
  const appNode = document.getElementById('app')
  ReactDOM.unmountComponentAtNode(appNode)
  ReactDOM.render(<App />, document.getElementById('app'))
}

But that would be a pain. So, typically, that menu and the content being changed are all part of the same react app. This app would render the menu, keep state about what item you clicked, and then render some components conditionally, depending on what was clicked.

Something like this example

function App() {
  const [showingItem, setShowingItem] = React.useState(null)

  return (
    <>
      <p><a href="#" onClick={() => setShowingItem('A')}>Show Item A</a></p>
      <p><a href="#" onClick={() => setShowingItem('B')}>Show Item B</a></p>

      {showingItem === 'A' ? <AppA /> : null}
      {showingItem === 'B' ? <AppB /> : null}
    </>
  )
}

Upvotes: 1

Related Questions