title: Wrapping A username in Daily.co using React
body: <p>This my <strong>REACT</strong> code in which I am unable to add the username by default and take the name before starting the meeting using <strong>DAILY.CO</strong>. I used the reference from one URL from stackoverflow however that was for different iframe URLs.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useRef, useEffect } from "react";
  import DailyIframe from '@daily-co/daily-js';
  import './VideoCallMain.css';
  import { useSelector } from "react-redux";
  
  
  const VideoCallMain = () =&gt; {
    const { user } = useSelector(state =&gt; state.user);
    const userName = user.name;
    const url = `https://mymeeting.daily.co/test?t=eyJhbGciOiJIUzI1N`;
    const iframeRef = useRef();
  
    
  
    useEffect(() =&gt; {
      if (!url) {
        console.error("please set an url!");
        return;
      }
      
      const daily = DailyIframe.wrap(iframeRef.current, {
        //userName: user.name,
        showLeaveButton: true,
      });
      daily.on('joining-meeting', (event) =&gt; {
          console.log('joining-meeting event', event);
      })
      .on('joined-meeting', (event) =&gt; {
          console.log('joined-meeting event', event);
          daily.iframe().style.visibility = 'visible';
      })
      .on('participant-counts-updated', (event) =&gt; {
          console.log('participant count updated');
      })
      daily.on('left-meeting', (event) =&gt; {
          console.log('left-meeting event', event);
      }) 
      daily.join({ url, userName: user.name, });
      
    }, []);
  
    return (
      &lt;iframe
        className='myFrame'
        title="video call iframe"
        ref={iframeRef}
        allow="camera; microphone; fullscreen"
      &gt;&lt;/iframe&gt;
    );
  }
  
  export default VideoCallMain</code></pre>
  </div>
  </div>
  </p>