ReactJS Модальное открытие несколько раз, когда в Loop

Question

Привет, я играю с ReactJS, и нашел этот удивительный Модальный компонент, чтобы открыть Видео в Модале, но когда я помещал Modal внутри цикла с несколькими ссылками и открывал модальный, он открывается как 5 раз, если у меня 5 ссылок. Что я делаю неправильно?

модальный компонент: https://github.com/appleple/react-modal-video

import React from 'react' 
import ReactDOM from 'react-dom'enter code here 
import ModalVideo from 'react-modal-video' 

class App extends React.Component { 
constructor() { 
    super() 
    this.state = { 
     isOpen: false 
    } 
    this.openModal = this.openModal.bind(this) 
    } 

    openModal() { 
    this.setState({isOpen: true}) 
    } 

     render() { 
     return (
      <div> 
      <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' /> 
      <button onClick={this.openModal}>Open</button> 
      </div> 
     ) 
     } 
    } 

    ReactDOM.render(
     <App />, 
     document.getElementById('root') 
    ) 

Моя Петля с модальным компонентом Внутри:

render(){ 
    return(
      <div> 
       {(this.props.frag.all == null) ? null : 
        this.props.frag.all.map((frags, i) => { 
        return (
        <li key={frags.id} className="group" id="" style={{width: 'calc(13% - 30px)'}}> 
        <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='{frags.url}' /> 
         <button onClick= {this.openModal.bind(this)}>Open</button> 
        </li> 
       )}) 
       } 
      </div> 

Answer 1

Проблема заключается в том, что каждый ModalComponent использует одно и то же свойство состояния isOpen, поэтому, когда вы нажимаете на любую ссылку, оно устанавливает это свойство, и каждый ModalComponent становится открытым. Вы должны использовать уникальное свойство для каждого модального (вы можете использовать poperty, который вы уже используете как key).

<li key={frags.id} className="group" id="" style={{width: 'calc(13% - 30px)'}}> 
    <ModalVideo channel='youtube' isOpen={this.state.isOpen[frags.id]} videoId='{frags.url}' /> 
    <button onClick= {this.openModal.bind(this, frags.id)}>Open</button> 
</li> 

И ваш метод:

openModal (id) { 
    this.setState({ 
     isOpen: { 
      [id]: true 
     } 
    }); 
} 

Answer 2

Причина в том, вы используете единую state переменный для поддержания open/close статуса modal, он будет работать правильно для одного, но в случае нескольких модалов вам нужно использовать несколько st ели значения для поддержания состояния, используйте:

Определить isOpen как array в состоянии:

this.state= { 
    isOpen=[], 
} 

Используйте этот метод, чтобы change статус какого-либо конкретного modal:

openModal(index){ 
    let isOpen = this.state.isOpen.slice(); 
    isOpen[index] = true; 
    this.setState({isOpen}); 
} 

Bind в index каждого модала в onClick метод:

render(){ 
    return(
     <div> 
      {(this.props.frag.all == null) ? null : 
       this.props.frag.all.map((frags, i) => { 
       return (
       <li key={frags.id} className="group" id="" style={{width: 'calc(13% - 30px)'}}> 
       <ModalVideo channel='youtube' isOpen={this.state.isOpen[i] || false} videoId='{frags.url}' /> 
        <button onClick= {this.openModal.bind(this,i)}>Open</button> 
       </li> 
      )}) 
      } 
     </div> 
    ) 
}