# Web SDK on React app not working properly

**URL:** <https://devforum.zoom.us/t/web-sdk-on-react-app-not-working-properly/12350>\
**Category:** Web\
**Created:** [April 9, 2020, 10:25am UTC](https://devforum.zoom.us/t/web-sdk-on-react-app-not-working-properly/12350 "2020-04-09T10:25:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![saki1988](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@saki1988](https://devforum.zoom.us/u/saki1988)\
**Post date:** [April 9, 2020, 10:25am UTC](https://devforum.zoom.us/t/web-sdk-on-react-app-not-working-properly/12350/1 "2020-04-09T10:25:02Z")

</div>

I am having an issue with the web sdk inside a react app. I have a complete blank page where I am loading the zoom player. The UI breaks and it doesn’t work well, I can’t open the chat properly, the more menu doesn’t work and if I open the page in a mobile using chrome it won’t work. Can you hint me on how to fix this?

```
import React, { Component } from 'react'
import { ZoomMtg } from '@zoomus/websdk'

class ZoomPlayer extends Component {
  componentDidMount() {
    const API_KEY = 'x'
    const API_SECRET = 'x'
    const meetConfig = {
      meetingNumber: x,
      userName: 'Student' + String(Math.round(Math.random() * 100)),
      passWord: x,
      leaveUrl: ''
    }

    ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.4/lib', '/av');
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();

    ZoomMtg.generateSignature({
      meetingNumber: meetConfig.meetingNumber,
      apiKey: API_KEY,
      apiSecret: API_SECRET,
      role: 1,
      success (res) {
        console.log('signature', res.result)
        ZoomMtg.init({
          leaveUrl: meetConfig.leaveUrl,
          disableCallOut: true,
          disableRecord: true,
          isSupportQA: false,
          isSupportCC: false,
          showPureSharingContent: false,
          screenShare: false,
          disableJoinAudio: false,
          audioPanelAlwaysOpen: false,
          isSupportChat: true,
          videoDrag: false,
          disableInvite: true,
          success () {
            ZoomMtg.join(
              {
                meetingNumber: meetConfig.meetingNumber,
                userName: meetConfig.userName,
                signature: res.result,
                apiKey: API_KEY,
                passWord: meetConfig.passWord,
                success () {
                  console.log('join meeting success')
                },
                error (res) {
                  console.log('Error generating signature')
                  console.log(res)
                }
              }
            )
          },
          error (res) {
            console.log(res)
          }
        })
      }
    })
  }

  render () {
    return (
      <div id="zmmtg-root"></div>
    )
  }
}

export default ZoomPlayer
```

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [April 10, 2020, 7:55am UTC](https://devforum.zoom.us/t/web-sdk-on-react-app-not-working-properly/12350/2 "2020-04-10T07:55:40Z")

</div>

Hey @saki1988,

Can you share screenshots of the issue?

The Web SDK is currently limited with mobile responsive functionality.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![DeveloperBot](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/developerbot/32/12632_2.png) [@DeveloperBot](https://devforum.zoom.us/u/DeveloperBot)\
**Post date:** [August 21, 2020, 8:25pm UTC](https://devforum.zoom.us/t/web-sdk-on-react-app-not-working-properly/12350/3 "2020-08-21T20:25:30Z")

</div>