title: Change the state of a react app via API of the same app
body: <p>I'm working on a huge project where functionalities are divided into a separate react project.</p>
  
  <p>Consider the following scenario
  <a href="https://i.stack.imgur.com/H97G9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H97G9.png" alt="enter image description here"></a></p>
  
  <p>Here <code>BaseReactApp</code> is the wrapper app where every chunks will be merged. Now my problem is I want to interact with the state of <code>ReactApp1</code>(Showing in iframe - blue area) from the buttons shown below the iframe.</p>
  
  <p>I'm thinking about the scenario whereby clicking on the Button1, some kind of API interacts with the ReactApp1 and changes the state of the application which is showing over there. But I'm not sure whether it will work or not.</p>
  
  <p>I've tried to make a route in the ReactApp1 to change the state of the app and hitting that URL via Button1 but it is not working. I guess because of the context issue...</p>
  
  <p>Kindly let me know how can I achieve such a thing.</p>
  
  <p>P.S. - ReactApp1 is purely a react project. Mostly it will be hosted on a different location.</p>