-1

I have 2 component to be rendered present in single div of myProject-init.js, 1 at a time. But both are getting called parallel.

myProject-init.js file:

ReactDOM.render(
<div>
    <component1>in component1</component1>
    <component2>in component2</component2>
</div>

I want to call component1 independently from other project, can I do the same? if yes then how?

Sasa
  • 7
  • 1
  • 1
  • 5
  • What's that 'other project' and why can't you merge them into a single big application? What does 'call' mean? Please, explain your case further. Most likely you have XY problem. – Estus Flask Dec 25 '18 at 10:29
  • "But both are getting called parallel" <- What? – AndrewL64 Dec 25 '18 at 10:32
  • As per understanding, you want to load the second component after completing of first one? If is it same, then would be sort of logic to be used... like ternary or something to manage. – Anupam Maurya Dec 26 '18 at 02:30
  • in parallel means both are getting called when application is loaded. I just want to call 1 component at a time depending upon the conditions. I was asking whether its possible to call them independently on basis of conditions? – Sasa Dec 26 '18 at 05:21

1 Answers1

0

What i understood is you have 2 components and you want is to render 1 component at a time. so it's better to use conditional rendering and render only one component using ReactDOM.render()

for example

    import React from 'react'
    import ReactDOM from 'react-dom';
    import Component1 from 'somewhere'
    import Component2 from 'somewhere'

    let renderedComponent;

    if (certain condition to meet) {
      renderedComponent = <Component1/>
    } else { 
       renderedComponent = <Component2/>
    }
    ReactDOM.render(renderedComponent, document.getElementById('root'));

Another way 

   // check condition here and assign its value 
   // eg: let renderComponent1 = ( condition to check )
    let renderComponent1 = true 
    let renderComponent2 = false 

 ReactDOM.render(
    <div> 
     {renderedComponent1 && <Component1 />}
     {renderedComponent2 && <Component2 />}
   </div>
, document.getElementById('root'));

This will only render <Component1 /> and if you want to only render <Component2/> then set renderComponent2 to true and renderComponent1 to false.

Setting true to both renderComponent1 and renderComponent2 variables will render both component and setting false will not render any component

I hope this is what you need.

Sahil Raj Thapa
  • 2,353
  • 3
  • 12
  • 23