CODEWITHSUNDEEP
reactjs
Elcid_91
Elcid_91

Reputation: 1681

ReactJS rendering a component in a specific DIV element

I am attempting to render a component generated by a route; however, I need the component rendered to a specific element:

https://codesandbox.io/s/bold-feather-yh1bt

Clicking on the "Log It In" link on the home component will route you to the "/Login" component. In this component - clicking on any of the "Window" links renders the component correctly; however, I need the component rendered to the "logincontainer" elementID. How do I pull that off? Thanks All!

Upvotes: 1

Views: 2512

Answers (2)

Shmili Breuer
Shmili Breuer

Reputation: 4147

You need to move

 <Route path="/Login/Win1" component={win1} />
 <Route path="/Login/Win2" component={win2} />
 <Route path="/Login/Win3" component={win3} />

Inside the logincontainer div.

like this

  <div
      id="logincontainer"
      style={{ backgroundColor: "Aqua", width: "100%", height: "200px" }}
    >
      <Route path="/Login/Win1" component={win1} />
      <Route path="/Login/Win2" component={win2} />
      <Route path="/Login/Win3" component={win3} />
  </div>

Hope this helps.

Upvotes: 2

Ed C
Ed C

Reputation: 343

You can use react portals for that. More info here

render() {
  // React does *not* create a new div. It renders the component into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    <MyComponent />,
    domNode
  );
}

Upvotes: 2

Related Questions