title: How to use postMessage and addEventListener in reactjs and nextjs?
body: <p>I want to communicate with iframe using React Hooks.I tried to use <strong>postMessage</strong> and <strong>addEventListener</strong> in parents iframe and child iframe.</p>
  <p>I want press button in parents iframe and send message to child iframe ,vice versa
  However,it is not working.
  What is the problem? is that addEventListener not working in react hook when using next.js</p>
  <p>Code sandbox project link</p>
  <p><a href="https://codesandbox.io/s/snowy-smoke-wyftk" rel="nofollow noreferrer">https://codesandbox.io/s/snowy-smoke-wyftk</a></p>
  <p><strong>Parents iframe</strong> - index.js</p>
  <pre><code>import { useRef, useEffect, useState } from &quot;react&quot;;
  
  const IndexPage = () =&gt; {
    const IFrameRef = useRef(null);
    const [receivedMsg, setReceivedMsg] = useState(&quot;&quot;);
  
    const sendMessage = () =&gt; {
      console.log(&quot;send parents msg&quot;);
      if (!IFrameRef.current) return;
      IFrameRef.current.contentWindow.postMessage(
        &quot;Hello son&quot;,
        &quot;https://wyftk.sse.codesandbox.io/&quot;
      );
    };
  
    useEffect(() =&gt; {
      window.addEventListener(&quot;message&quot;, function (e) {
        if (e.origin !== &quot;https://wyftk.sse.codesandbox.io/&quot;) return;
        setReceivedMsg(&quot;child message =&quot; + e.data);
      });
    }, []);
  
    return (
      &lt;div&gt;
        &lt;h1&gt;parents iframe&lt;/h1&gt;
        &lt;button
          type=&quot;primary&quot;
          onClick={() =&gt; {
            sendMessage();
          }}
        &gt;
          send sms to child
        &lt;/button&gt;
        &lt;iframe
          ref={IFrameRef}
          style={{ width: &quot;100%&quot;, height: &quot;100%&quot; }}
          src=&quot;/model&quot;
          id=&quot;calculation&quot;
          //onLoad={this.sendToken}
          title=&quot;model&quot;
        &gt;&lt;/iframe&gt;
        &lt;p&gt;{receivedMsg}&lt;/p&gt;
      &lt;/div&gt;
    );
  };
  
  export default IndexPage;
  </code></pre>
  <p><strong>Child iframe</strong> - model.js</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  
  const ModelPage = () =&gt; {
    const [receivedMsg, setReceivedMsg] = useState(&quot;&quot;);
  
    const sendMessage = () =&gt; {
      console.log(&quot;send child msg&quot;);
      window.parent.postMessage(&quot;Hi dad!&quot;, &quot;https://wyftk.sse.codesandbox.io/&quot;);
    };
    useEffect(() =&gt; {
      window.addEventListener(&quot;message&quot;, function (e) {
        if (e.origin !== &quot;https://wyftk.sse.codesandbox.io/&quot;) return;
        setReceivedMsg(&quot;parent message =&quot; + e.data);
      });
    }, []);
  
    return (
      &lt;div&gt;
        &lt;h2&gt;model page&lt;/h2&gt;
  
        &lt;button type=&quot;primary&quot; onClick={sendMessage}&gt;
          send sms to parents
        &lt;/button&gt;
        &lt;p&gt;{receivedMsg}&lt;/p&gt;
      &lt;/div&gt;
    );
  };
  export default ModelPage;
  </code></pre>