CODEWITHSUNDEEP
reactjsdom
sander
sander

Reputation: 1654

Rendering components that are rendered in different locations

component.js has 4 components that are each rendered in different section of the page:

component.js

ReactDOM.render(<ComponentLeft1/>, document.getElementById("colLeft1"));
ReactDOM.render(<ComponentRight1/>, document.getElementById("colRight1"));
ReactDOM.render(<ComponentLeft2/>, document.getElementById("colLeft2"));
ReactDOM.render(<ComponentRight2/>, document.getElementById("colRight2"));

export default {ComponentLeft1,ComponentRight1,ComponentLeft2, ComponentRight2};

Is there a way that I could use these components in another file so that they would render same way they render in component.js or somehow combine those 4 components but still be able to render them like they are currently?

Upvotes: 0

Views: 29

Answers (1)

Harsh Makadia
Harsh Makadia

Reputation: 3443

You can import the component where ever you want and use it by giving proper path

For example : If you want to import ** ComponentLeft1** to some other file then simply import it like:

import {ComponentLeft1} from './componentjs'

and finally, use it in that file as

<ComponentLeft1 />

Upvotes: 1

Related Questions