'Twilio sample react app trying to pass a room name in the URL and put it into a hidden field?

I know this sounds like a big ask, but I'm assuming someone else has already done this and has a simple answer because it seems like an obvious use case.

Twilio has a sample app available on GitHub for their video service. Unfortunately, I don't know much about react, so I was able to make a couple of little changes, but this one has me stumped.

The code is called: Twilio / twilio-video-app-react

https://github.com/twilio/twilio-video-app-react

When you launch the code to enter a video room, you are presented with a form to enter your name and the name of a video room. I need to remove that room name input field and replace it with a hidden variable that was provided in the URL. In other words:

  1. Get a room name variable that was passed as a query parameter on the URL
  2. Make sure the room name is "safe" (alphanumeric) and then put it into a hidden variable in the form
  3. Remove the visible input field (room name) from the form

That would take me two minutes in PHP, and it's probably really easy in react as well, but I can't figure it out. Hope someone can point me in the right direction.

Input form to enter Twilio video room



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source