I've implemented a video tag inside of a modal. On click of it the video should play. But, in my case, the same video is playing - node.js

Question

I'm new to React and trying to create a video library. Everything is working fine but I'm not not able to render the video in a dynamic way. Even if what I have implemented is dynamic, but it's playing the same video.
server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());
app.get('/latestVideos', (req, res) => {
res.send({
"videos": [
{
"thumbnail":"https://i.ytimg.com/vi/R-9i5NJsiL0/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4",
"title": "Lambhorghini",
"channelName":"Auto Car",
"views":"7 million views",
"lastUpdated":"3 weeks ago"
},
{
"thumbnail":"https://theawesomer.com/photos/2016/09/n6pdwdmjkze.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-85.mp4",
"title": "Porche",
"channelName":"LoudWire",
"views":"1 million views",
"lastUpdated":"4 weeks ago"
},
{
"thumbnail":"https://i.ytimg.com/vi/bsSK1DccV_Y/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-85.mp4",
"title": "Havana",
"channelName":"Camila Cabello",
"views":"7 million views",
"lastUpdated":"6 weeks ago"
},
{
"thumbnail":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6njcfy1wTsPr8WAs5CubtCommlw2HAfYFIp1IY2yWRU2Oj1uM4A",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-85.mp4",
"title": "See You Again",
"channelName":"Charlie Puth",
"views":"3 million views",
"lastUpdated":"1 week ago"
},
{
"thumbnail":"https://i.ytimg.com/vi/Z0P9KW9B7nw/maxresdefault.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/motion-20120802-85.mp4",
"title": "Manali To Leh",
"channelName":"Mumbiker Nikhil",
"views":"5 million views",
"lastUpdated":"2 weeks ago"
},
{
"thumbnail":"https://mm.aiircdn.com/5/679578.jpg",
"source": "http://yt-dash-mse-test.commondatastorage.googleapis.com/media/oops-20120802-85.mp4",
"title": "Don't Talk To Strangers",
"channelName":"Ronnie James Dio",
"views":"1 million views",
"lastUpdated":"4 weeks ago"
}
]
});
});
app.listen(port, () => console.log(`Listening on port ${port}`));
latestVideos.js
import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {latestVideos} from "../../actions";
class LatestVideos extends Component {
componentWillMount() {
this.props.getLatestVideos();
}
render() {
const {latestVideos} = this.props;
return (
<div className="container">
<h4 className="mt-3 mb-3"><i className="fas fa-play mr-2"></i>Latest Videos</h4>
<div className="row">
{latestVideos && latestVideos.map((data, i) => {
return (
<div key={i} className="col-sm-4">
<div className="card mb-3">
<img className="card-img-top" data-toggle="modal" data-target="#myModal" src={data.thumbnail}></img>
<div className="modal fade" id="myModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id="video"
poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>
<div className="card-body">
<h5 className="card-title">{data.title}</h5>
<p className="card-text">{data.channelName}</p>
<p>{data.views} | {data.lastUpdated}</p>
</div>
</div>
</div>
)
})}
</div>
</div>
)
}
}
const mapStateToProps = state => {
return {
latestVideos: state.videoBrowseList.latestVideos,
}
};
const mapActionsToProps = dispatch => {
return bindActionCreators({
getLatestVideos: latestVideos
}, dispatch);
};
export default connect(mapStateToProps, mapActionsToProps)(LatestVideos);
As you can from my code that is in server.js, everything is dynamic and in the frontend I have used map function. Everything is rendering, only the video, is playing the same video over and over again. Can someone please help me to troubleshoot this error

Answer 1

This is because your id myModal is same for all modal window, so only the first modal will be opened always, id should be unique.
Try the below code
<img className="card-img-top" data-toggle="modal" data-target={"#myModal" + i} src={data.thumbnail}></img>
<div className="modal fade" id={"myModal" + i}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<video src={data.source} id={"video" + i} poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
controls muted autoPlay>
</video>
{console.log(data.s)}
</div>
</div>
</div>
</div>