How do I display console log information to the user in a dropdown menu in React JSX?

Question

I need help with displaying the information from the console log to the user.

So in order to get a list of audio and video devices connected to the user's computer, I have this code. I can only see the list of devices in the console log (or via Developer Tools in Chrome)

But how do I add the deviceIDs that show up in the console log, into one of these drop down menu options using the working code I have?

Answer 1

I'm gonna assume that you want to display details about each of the device in a formatted manner in a dropdown. If that's the case, then the following code can be taken as a reference.

• Create a state called devices to which you can store the devices array.
• Iterate through each device and append to dropdown as a new option.
• Each option will take your custom console message as text and it will be displayed
• For the time being i have set dropdown option selected value as deviceId. You can update it based on your logic.

 // previous code
 const [devices, setDevices] = useState([]);

 // previous code
 navigator.mediaDevices.enumerateDevices().then( (devices) => {
   setDevices(devices);
   // rest of your code
 };

 <Select native defaultValue="" id="select">
  {devices.map(device => (
     <option
      key={device.deviceId}
      value={device.deviceId}
     >
       {`${device.kind}: ${device.label} id = ${device.deviceId}`}
     </option>
  ))};
 </Select>