0

I want to set autoplay true if it is video and false if it is image. I tried using setState inside autoplay as given below but it is throwing an error:

autoPlay={this.setState({ autoplayvideo: true })} Type 'void' is not assignable to type 'boolean'.ts(2322)

<Carousel dynamicHeight={true} showThumbs={false}   >
  {this.state.items.map((imageList, key) => {
    if (imageList.SourceType == "Video")
      return (<div>

        <video width="320" height="240" controls autoPlay={this.setState({ autoplayvideo: true })} >
          <source src={imageList.Image ? imageList.Image["Url"] : ''} type="video/mp4" ></source>
        </video>

        <p className={styles.legends} onClick={() => { this._onClickItem(imageList.Title) }}>{imageList.Title}</p>
      </div>)
    if (imageList.SourceType == "Text")
      return (<div>

        <img src={imageList.Image ? imageList.Image["Url"] : ''} />

        <p className={styles.legends} onClick={() => { this._onClickItem(imageList.Title) }}>{imageList.Title}</p>
      </div>)
  })}
</Carousel> 
  • you want to set the autoplay of video, right? and not the autoplay of your carousel? – Ganesh Sanap Oct 15 '19 at 4:21
  • yes autoplay for video but ony when i am on video when carousel move to image it should stop ,current its keep on playing even if i am move to another image – kumar Oct 15 '19 at 4:24
  • This error is because you are using setState method in your autoplay attribute, which returns void after setting the state. – Ganesh Sanap Oct 15 '19 at 4:28
1

This is throwing an error because you are using setState method in your autoPlay attribute, which returns void after setting the state.

Try using something like below:

<Carousel dynamicHeight={true} showThumbs={false}   >
  {this.state.items.map((imageList, key) => {
    if (imageList.SourceType == "Video") {
      this.setState({ autoplayvideo: true });
      return (
        <div>
          <video width="320" height="240" controls autoPlay={this.state.autoplayvideo} >
            <source src={imageList.Image ? imageList.Image["Url"] : ''} type="video/mp4" ></source>
          </video>
          <p className={styles.legends} onClick={() => { this._onClickItem(imageList.Title) }}>{imageList.Title}</p>
        </div>
      )
    }
    if (imageList.SourceType == "Text") {
      this.setState({ autoplayvideo: false });
      return (
        <div>
          <img src={imageList.Image ? imageList.Image["Url"] : ''} />
          <p className={styles.legends} onClick={() => { this._onClickItem(imageList.Title) }}>{imageList.Title}</p>
        </div>
      )
    }
  })}
</Carousel>

Update:

If this is giving below error:

Invariant Violation: Minified React error #185;

Then this is because we are setting the state multiple times inside render method.

So, in this case I think you may take leverage of onChange method of Carousel to write a function which will check if the next slide is video or image and then you can set the state property to true/false.

Check below GitHub reference for implementation of onChange method.

react-responsive-carousel: main.js.

  • Let me know if this works or I will suggest you another solution. – Ganesh Sanap Oct 15 '19 at 4:35
  • if i add this my webpart goes Invariant Violation: Minified React error #185; – kumar Oct 15 '19 at 5:13
  • no syntax error but webpart is blank with console giving this error Invariant Violation: Minified React error #185; – kumar Oct 15 '19 at 5:15
  • Oh I forgot...this is because we are setting the state multiple times inside render method....In this case I think you may take leverage of onChange method of Carousel to write a function which will check if the next slide is video or image and then you can set the state property to true/false. – Ganesh Sanap Oct 15 '19 at 5:30
  • 1
    Let me give a try your gudiance is so good for me in SPFX – kumar Oct 15 '19 at 9:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.