title: How do I create a popup window in react.js when the button and function are in separate file?
body: <p>Problem Description:
  There is a button on a webpage, and when I click the button, there will be a popup containing an image. The button is in the file called "index.jsx", and clicking on the button will trigger a function in the file "popUp.js", which will pop a window up. So in essence, the button and the PopUp function are in separate files.</p>
  
  <p>I want to write the function as:</p>
  
  <pre><code>export function PopUp (image: Image){
    return{
      ...
    };
  }
  </code></pre>
  
  <p>which will have the same effect as <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal</a>, except that the content of popup is an image rather than texts. I guess the emphasis of solution is on translating CSS on this webpage to react.js, but not sure how the syntax should look like.</p>
  
  <p>Any idea on how I can implement this? </p>