Как передать VideoId из списка в React Модальное Видео - PullRequest
Новая
       21

Как передать VideoId из списка в React Модальное Видео

0 голосов
/ 04 марта 2019

Я пытаюсь воспроизвести видео на YouTube в модальном окне по нажатию кнопки в моем приложении реакции.Я использую модуль узла «Reaction-Modal-Window» для модальных.Я получаю массив идентификаторов видео YouTube и передаю идентификаторы модальным образом следующим образом, но модальное окно получает только последний идентификатор из массива.Однако, если я пытаюсь напечатать идентификатор видео, я получаю соответствующие идентификаторы.Может ли кто-нибудь помочь в исправлении этого? 

<tr>
    <th></th>
    {filteredProductVideoId.map(k => 
        <td key={k}>VideoID: {k}
            <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId={k} 
            onClose={() => this.setState({isOpen: false})} />
            <button onClick={this.openModal}>Watch Video</button>
        </td>)
    }
</tr>

Чтобы просмотреть вывод, перейдите по этой ссылке - https://7jrz33j35x.codesandbox.io/ Выберите все четыре продукта и нажмите кнопку сравнения.Отображается табличное представление сравнения.В последнем ряду есть кнопка «смотреть видео» для каждого продукта.Рядом с кнопкой отображается соответствующий идентификатор (для целей отладки), но при нажатии кнопки просмотра видео воспроизводится видео с последним идентификатором из массива

1 Ответ

0 голосов
/ 04 марта 2019

передать идентификатор видео по нажатой кнопке через штат .. как показано ниже 

this.state = {
  //use this props inside modal video view
  currentVideoId : null 
}

this.updateVideoId(currentVideoId){
  this.setState({currentVideoId})
}

//your jsx change button onClick like below
<tr>
    <th></th>
    {filteredProductVideoId.map(k => 
        <td key={k}>VideoID: {k}
            <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId={k} 
            onClose={() => this.setState({isOpen: false})} />
            <button onClick={()=>{this.updateVideoId(k)}}>Watch Video</button>
        </td>)
    }
</tr>
...