React loop though the array

Question

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [videoDevicesList, setVideoDevices] = useState([]);

  useEffect(() => {
    // navigator.mediaDevices.enumerateDevices().then(gotDevices)

    if (true) {
      (async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();

        const videoInput = devices.filter(
          (device) => device.kind === "videoinput"
        );

        setVideoDevices(videoInput);
      })();
    }
  }, []);
  return (
    <div className="App">
      {JSON.stringify(videoDevicesList)}

      <h1>Loop</h1>

      {videoDevicesList.forEach((device) => (
        <div key={device.groupId}>{device.groupId}</div>
      ))}
    </div>
  );
}

I have this code. {JSON.stringify(videoDevicesList)} prints an array in the UI. Also typeof videoDevicesList retruns object.

And I want to loop through the array and print the groupId. But this doesn't work.

How do I fix this error?

Any help!

Thanks in advance. =)

Code sand box

change the forEach to a map. Here is the difference between map and forEach codeburst.io/javascript-map-vs-foreach-f38111822c0f — Pixele9
– Pixele9, Commented Dec 4, 2020 at 6:29

andy mccullough · Accepted Answer · 2020-12-04 06:22:50Z

2

change your forEach to map

map returns a new array, in this case its an array of components

forEach simply iterates over each item, it doesn't return anything.

https://codesandbox.io/s/epic-keldysh-u9x8i

answered Dec 4, 2020 at 6:22

andy mccullough

9,6817 gold badges37 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

martindelophy · Accepted Answer · 2020-12-04 06:33:37Z

maybe you can try this way

import React, { useEffect, useState, useMemo } from "react";
import "./styles.css";

export default function App() {
  const [videoDevicesList, setVideoDevices] = useState([]);

  useEffect(() => {
    // navigator.mediaDevices.enumerateDevices().then(gotDevices)

    if (true) {
      (async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();

        const videoInput = devices.filter(
          (device) => device.kind === "videoinput"
        );

        setVideoDevices(videoInput);
      })();
    }
  }, []);
 const groupIds = useMemo(() => {
    let $groupIds = [];
    videoDevicesList.forEach((device) =>{
      $groupIds.push (
        <div key={`${device.groupId}`}>{device.groupId}</div>
      )
    } )
    return $groupIds
  },[videoDevicesList]) 
  
  return (
    <div className="App">
      {JSON.stringify(videoDevicesList)}
      {typeof videoDevicesList}

      <h1>Loop</h1>
      {groupIds}
    </div>
  );

Collectives™ on Stack Overflow

React loop though the array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related