Я реализовал видео тег внутри модального.По клику видео должно воспроизводиться.Но, в моем случае, играет то же видео

Question

Я новичок в React и пытаюсь создать библиотеку видео. Все работает нормально, но я не могу воспроизвести видео динамически. Даже если то, что я реализовал, динамично, но воспроизводит то же видео.

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);

Как вы можете из моего кода, который находится в server.js, все динамично, и во внешнем интерфейсе я использовал функцию map. Все рендеринг, только видео, воспроизводит одно и то же видео снова и снова. Может кто-нибудь, пожалуйста, помогите мне устранить эту ошибку

Answer 1

Это потому, что ваш идентификатор myModal одинаков для всех модальных окон, поэтому всегда будет открыт только первый модал, id должен быть уникальным.

Попробуйте следующий код

<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>