Unable to make react-player light prop always true

Question

I have implemented a slider like property. Inside each slide, there is a video and its name. I am using [react-player][1] to display the video thumbnail. Once you click on any of the video a modal will get open and will play the video I have rendered the react-player is that the light property is always true. But it's not working once you click on the video that particular position of the slider loses the light property.

import React, { Component } from 'react'
import IndividualSlider from './IndividualSlider'
import ModalVideo from 'react-modal-video'
import { Modal, Button } from 'antd';

import ReactPlayer from 'react-player/youtube';


export class Experience extends Component {
  constructor(){
    super();
    this.state={
        Video:[
            {
                url:'https://www.youtube.com/embed/H2yCdBIpxGY',
                name:'Recurssion'
            },
            {
                url:'https://www.youtube.com/embed/s5YgyJcoUI4',
                name:'Array'
            },
            {
                url:'https://www.youtube.com/embed/_C4kMqEkGM0',
                name:'DP'
            },
            {
                url:'https://www.youtube.com/embed/VBnbYNksWTA',
                name:'Graph'
            },
            {
                url:'https://www.youtube.com/embed/M1q3Pzk2UXs',
                name:'Trie'
            }
        ],
        modalIsOpen:false,
        modalLink:""
    }
    this.left = this.left.bind(this);
    this.right=this.right.bind(this);
    this.modalPlay = this.modalPlay.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.handleOk = this.handleOk.bind(this);
}

    handleOk = e => {
      console.log(e);
      this.setState({
      modalIsOpen: false,
     });
    };

    handleCancel = e => {
      console.log(e);
      this.setState({
      modalIsOpen: false,
     });
    };

   modalPlay=(link)=>{
     this.setState({
        modalIsOpen:true,
        modalLink:link
    })
   }

  right=()=>{
    let arr = this.state.Video;
    let temp = arr[0];
    arr.shift();
    arr.push(temp);
    this.setState({
        Video:arr
    })
   }

   left=()=>{
    let arr = this.state.Video;
    let temp = arr[arr.length-1];
    arr.pop();
    arr.unshift(temp);
    this.setState({
        Video:arr
    })
   }

   render() {
    return (
        <div className="ExperienceAClass">
            <div className="OneWeekHeading">
                <h2 className="OneWeekCaption">
                    Experience a class
                </h2>
                <hr className="MentorsCaptionUnderLine" align="center" width="50%"></hr>
            </div>

             <Modal
                title=""
                visible={this.state.modalIsOpen}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={null}

            >
              <ReactPlayer className="ModalVideo" url={this.state.modalLink}/>  
             </Modal>    
            
            <div className="EntireSliderWrapper">
            <a class="prev" onClick={this.left}>
            </a>

            <div className="VideoSlider">
                {this.state.Video.map((child,index)=>{
                        return <IndividualSlider modalPlay={this.modalPlay} url={child.url} name= 
                                {child.name}/>
                })
                }
            </div> 
            <a class="next" onClick={this.right}>
            </a>       
            </div>      
        </div>       
      )
  }
}

export default Experience

And the IndividualSlider component is as follows:

import React, { Component } from 'react'
import ReactPlayer from 'react-player/youtube';


export class IndividualSlider extends Component {
 constructor(){
    super();
    this.state={
        light:true
    }
    this.onClick=this.onClick.bind(this)
 }

  onClick=()=>{
    let modalPlay=this.props.modalPlay;
    modalPlay(this.props.url);
   }

   render() {
     return (
        <div className="VideoDetails fade">
             <ReactPlayer className="YoutubeVideo" onClick={this.onClick} light = 
              {this.state.light} url={this.props.url}/>
            <p>
                {this.props.name}
            </p>
        </div>
    )
  }
}

export default IndividualSlider

In the above code, I have made the light prop to be always true. As the slide is clicked this component renders but the thumbnail property is not held.

Also, When the modal closes the video keeps on playing. How to deal with that?

As you can see the video which was played regain it's light={true} once slid but the position where it was when played doesn't imply light={true}

Answer 1

I believe the problem is that because you have two instances of React player, one has the light property passed to it and the other is not. Since you always want the light property to work, pass it as a prop set to true always.

The light property is working in the individual slider, because you are indeed setting it in the individual slider

// Inside IndividualSlider component  you have this
 <ReactPlayer className="YoutubeVideo" onClick={this.onClick} light = 
              {this.state.light} url={this.props.url}/>
// remove state it and make it like this, since state is not needed
 <ReactPlayer className="YoutubeVideo" onClick={this.onClick} light={true} url={this.props.url}/>

Now you are losing the light when clicking on an individual video, because that video is rendered in the parent component (the Experience component_, and there you are not passing the light prop

// In Experience Component you have this
<ReactPlayer className="ModalVideo" url={this.state.modalLink} />  
// change it to 
<ReactPlayer className="ModalVideo" url={this.state.modalLink} light={true} />