Playing dynamically changing list of MediaStreams in react

Question

I am currently working on a WebRTC based video chat application with ReactJS. Assuming that I have a state, remoteList, containing a list of MediaStreams, which changes dynamically based on the number of users in the call, how do I autoplay all the MediaStreams that I receive. This is what I have but it doesn't work:

render() {
    const videoList = Object.keys(this.state.remoteList).map((index, stream) => 
        <video key={index} id={"Peer" + index} ref={a => a.srcObject = stream} autoPlay />
    );
    
    return(
            <div id="videoGrid">
                {videoList};
            </div>
    );
}

Answer 1

I'm not sure, but you can try to use play() method on video element.